Migrating to React Router 4 with Redux

react-router v4 requires you to do more stuff to add a proper route.

You will need to install:

npm i -S history react-router react-router-redux

browserHistory is no longer available, to create a history object you need:

import { createBrowserHistory } from 'history';
// then call createBrowserHistory()

To integrate with redux you need to add one extra reducer to your combined reducers:

import { routerReducer as routing } from 'react-router-redux';
// ...

const App = combineReducers({
  app,
  about,
  routing, // new
});

export default App;

After creating a store, you can finally create the history object:

import { syncHistoryWithStore } from 'react-router-redux';
const history =
  syncHistoryWithStore(createBrowserHistory() as any, store);

And use it

  <Router history={ history } children={ Routes } />

A commit doing it can be seen here, but here are more things in this commit as well.

Troubleshoot

The prop history is marked as required in Router, but its value is undefined.

• browserHistory is no longer available in react-router, see post to use history package instead.

react router 4 Cannot read property ‘listen’ of undefined

• You tried to create a history object with some documentation/tutorial you found, but you should do as this post says instead.