diff --git a/README.md b/README.md
index f61809d3d..c9bbc8809 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Features
* Includes react-addons-test-utils (`^0.14.0`)
* [React-Router](https://github.com/rackt/react-router) (`^1.0.0`)
* [Redux](https://github.com/gaearon/redux) (`^3.0.0`)
- * redux-router (`^1.0.0-beta3`)
+ * redux-simple-router (`^0.0.10`)
* react-redux (`^4.0.0`)
* redux-devtools
* use `npm run dev:nw` to display in a separate window.
@@ -154,7 +154,7 @@ You can redefine which packages to treat as vendor dependencies by editing `vend
'react',
'react-redux',
'react-router',
- 'redux-router',
+ 'redux-simple-router',
'redux'
]
```
diff --git a/config/index.js b/config/index.js
index 8c9661638..2963e7dfd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -34,7 +34,7 @@ config.set('vendor_dependencies', [
'react-redux',
'react-router',
'redux',
- 'redux-router'
+ 'redux-simple-router'
].filter(dep => {
if (pkg.dependencies[dep]) return true;
diff --git a/package.json b/package.json
index 4711fb7ed..b434aa8dc 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
"react-redux": "^4.0.0",
"react-router": "1.0.0",
"redux": "^3.0.0",
- "redux-router": "^1.0.0-beta3",
+ "redux-simple-router": "^0.0.10",
"redux-thunk": "^1.0.0",
"yargs": "^3.18.0"
},
diff --git a/src/app.js b/src/app.js
index d3e68acc7..cd664fc04 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,15 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Root from './containers/Root';
-import configureStore from './store/configureStore';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import createBrowserHistory from 'history/lib/createBrowserHistory';
+import { syncReduxAndRouter } from 'redux-simple-router';
+import Root from './containers/Root';
+import configureStore from './store/configureStore';
-const target = document.getElementById('root');
-const store = configureStore(window.__INITIAL_STATE__, __DEBUG__);
+const target = document.getElementById('root');
+const history = createBrowserHistory();
+const store = configureStore(window.__INITIAL_STATE__, __DEBUG__);
+
+syncReduxAndRouter(history, store);
const node = (
-
+
);
ReactDOM.render(node, target);
diff --git a/src/containers/Root.js b/src/containers/Root.js
index a45c0d04e..4c322cb1e 100644
--- a/src/containers/Root.js
+++ b/src/containers/Root.js
@@ -1,14 +1,15 @@
import React from 'react';
import { Provider } from 'react-redux';
+import { Router } from 'react-router';
import routes from '../routes';
-import { ReduxRouter } from 'redux-router';
import DevTools from './DevTools';
import { createDevToolsWindow } from '../utils';
export default class Root extends React.Component {
static propTypes = {
- store : React.PropTypes.object.isRequired,
- debug : React.PropTypes.bool,
+ history : React.PropTypes.object.isRequired,
+ store : React.PropTypes.object.isRequired,
+ debug : React.PropTypes.bool,
debugExternal : React.PropTypes.bool
}
@@ -30,9 +31,9 @@ export default class Root extends React.Component {
return (
-
+
{routes}
-
+
{this.renderDevTools()}
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 6674988d8..85e4ef43d 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,8 +1,8 @@
import { combineReducers } from 'redux';
-import { routerStateReducer } from 'redux-router';
+import { routeReducer } from 'redux-simple-router';
import counter from './counter';
export default combineReducers({
counter,
- router: routerStateReducer
+ routing: routeReducer
});
diff --git a/src/routes/index.js b/src/routes/index.js
index 08934616e..25c54802c 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -2,9 +2,11 @@ import React from 'react';
import { Route, IndexRoute } from 'react-router';
import CoreLayout from 'layouts/CoreLayout';
import HomeView from 'views/HomeView';
+import AboutView from 'views/AboutView';
export default (
-
+
+
);
diff --git a/src/store/configureStore.js b/src/store/configureStore.js
index 25ee01754..28ce14c92 100644
--- a/src/store/configureStore.js
+++ b/src/store/configureStore.js
@@ -1,8 +1,5 @@
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
-import routes from '../routes';
-import { reduxReactRouter } from 'redux-router';
-import createHistory from 'history/lib/createBrowserHistory';
import DevTools from 'containers/DevTools';
import {
applyMiddleware,
@@ -18,14 +15,8 @@ export default function configureStore (initialState, debug = false) {
if (debug) {
createStoreWithMiddleware = compose(
middleware,
- reduxReactRouter({ routes, createHistory }),
DevTools.instrument()
);
- } else {
- createStoreWithMiddleware = compose(
- middleware,
- reduxReactRouter({ routes, createHistory })
- );
}
const store = createStoreWithMiddleware(createStore)(
diff --git a/src/views/AboutView.js b/src/views/AboutView.js
new file mode 100644
index 000000000..b157bae62
--- /dev/null
+++ b/src/views/AboutView.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+const AboutView = () => (
+
+
This is the about view!
+
+ Back To Home View
+
+);
+
+export default AboutView;
diff --git a/src/views/HomeView.js b/src/views/HomeView.js
index 437307f6d..4fb571670 100644
--- a/src/views/HomeView.js
+++ b/src/views/HomeView.js
@@ -2,6 +2,7 @@ import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import counterActions from 'actions/counter';
+import { Link } from 'react-router';
// We define mapStateToProps and mapDispatchToProps where we'd normally use
// the @connect decorator so the data requirements are clear upfront, but then
@@ -30,6 +31,8 @@ export class HomeView extends React.Component {
onClick={this.props.actions.increment}>
Increment
+
+ Go To About View
);
}