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.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s