Use react-redux-router@next (compatible with react-router v4)

Author: calvinl

client/index.js

@@ -2,13 +2,14 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-// import { browserHistory } from 'react-router';
-// import { syncHistoryWithStore } from 'react-router-redux';
+import { ConnectedRouter } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
+import createHistory from 'history/createBrowserHistory';
 import configureStore from 'store';
 import App from 'containers/App';
 
+const history = createHistory();
+
 /* Images
  * This space is reserved for images that are required by server rendering,
  * e.g. the favicon and any other images that need to be in the base HTML file.
@@ -21,16 +22,15 @@ const rootElement = document.getElementById('app');
 // Creates the Redux store based on the initial state passed down by the server
 // rendering.
 const initialState = window.__INITIAL_STATE__;
-const store = configureStore(initialState);
-// const history = syncHistoryWithStore(browserHistory, store);
+const store = configureStore(initialState, history);
 
 const render = (Component) => {
   ReactDOM.render(
     <Provider store={store}>
       <AppContainer>
-        <BrowserRouter>
+        <ConnectedRouter history={history}>
           <Component />
-        </BrowserRouter>
+        </ConnectedRouter>
       </AppContainer>
     </Provider>,
     rootElement

common/js/store/index.dev.js

@@ -2,15 +2,20 @@ import { compose, createStore, applyMiddleware } from 'redux';
 import rootReducer from 'reducers';
 import DevTools from 'containers/DevTools';
 import { createLogger } from 'redux-logger';
+import { routerMiddleware } from 'react-router-redux';
 
-export default function configureStore(initialState) {
+export default function configureStore(initialState, history = null) {
   /* Middleware
    * Configure this array with the middleware that you want included
    */
   let middleware = [
     createLogger()
   ];
 
+  if (history) {
+    middleware.push(routerMiddleware(history));
+  }
+
   // Add universal enhancers here
   let enhancers = [
     DevTools.instrument()

common/js/store/index.prod.js

@@ -1,12 +1,17 @@
 import { compose, createStore, applyMiddleware } from 'redux';
 import rootReducer from 'reducers';
+import { routerMiddleware } from 'react-router-redux';
 
-export default function configureStore(initialState) {
+export default function configureStore(initialState, history = null) {
   /* Middleware
    * Configure this array with the middleware that you want included.
    */
   let middleware = [];
 
+  if (history) {
+    middleware.push(routerMiddleware(history));
+  }
+
   // Add universal enhancers here
   let enhancers = [];