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

13 thoughts on “Migrating to React Router 4 with Redux

  1. thùng giấy

    There are certainly plenty of particulars like that to take into consideration. That could be a great point to convey up. I offer the ideas above as general inspiration however clearly there are questions just like the one you convey up where the most important thing will likely be working in honest good faith. I don?t know if greatest practices have emerged round things like that, but I’m positive that your job is clearly recognized as a good game. Each boys and girls really feel the affect of just a moment’s pleasure, for the remainder of their lives.

    Reply
  2. jasa auto like fb

    Can I simply say what a relief to find somebody who truly knows what theyre talking about on the internet. You definitely know how to deliver a difficulty to gentle and make it important. Extra people need to read this and understand this side of the story. I cant consider youre not more widespread because you definitely have the gift.

    Reply
  3. P2000

    I discovered your blog website on google and test just a few of your early posts. Continue to keep up the excellent operate. I simply extra up your RSS feed to my MSN News Reader. Looking for ahead to reading more from you afterward!…

    Reply
  4. como ganar dinero con neobux

    I discovered your blog website on google and verify a few of your early posts. Proceed to keep up the excellent operate. I just further up your RSS feed to my MSN News Reader. Searching for forward to studying more from you in a while!…

    Reply
  5. velcro

    I am typically to blogging and i actually respect your content. The article has really peaks my interest. I am going to bookmark your web site and keep checking for new information.

    Reply
  6. packaging tape

    Nice post. I be taught one thing more challenging on completely different blogs everyday. It is going to at all times be stimulating to read content material from different writers and practice somewhat something from their store. I’d choose to make use of some with the content material on my blog whether or not you don’t mind. Natually I’ll give you a link in your web blog. Thanks for sharing.

    Reply
  7. Banner exchange

    There are definitely a lot of particulars like that to take into consideration. That may be a nice point to convey up. I provide the thoughts above as basic inspiration however clearly there are questions just like the one you deliver up the place the most important thing will be working in trustworthy good faith. I don?t know if finest practices have emerged round things like that, however I am sure that your job is clearly identified as a fair game. Both boys and girls really feel the impact of only a moment’s pleasure, for the remainder of their lives.

    Reply
  8. London commercial photographer

    After I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a remark is added I get four emails with the identical comment. Is there any manner you’ll be able to remove me from that service? Thanks!

    Reply

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s