Moving from react router 3.x to 4.x

Question

How can I move to using https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js from using https://cdnjs.cloudflare.com/ajax/libs/

Answer 1

I was able to configure it with redux by changing a few things:

First, browserHistory is not defined on react-router anymore. One way to get it back is to use the package history.

You will need to install (redux optional):

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

Instead of trying to import browserHistory use:

import { createBrowserHistory } from 'history';

If you want to use redux then import this and add it to your combined reducers:

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

combineReducers({
  home, about,
  routing, // new
});

Next you create the history object

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

// regular
const history = createBrowserHistory();

Then change your router to use the new history object

Everything else should be the same.

---

If anyone runs into The prop history is marked as required in Router, but its value is undefined.

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

---

Related

• Github ts-react-redux-startup: Project that uses it
• Migrating to React Router 4 with Redux