0

I am trying to convert this simple application to support react router https://github.com/jackfranklin/universal-react-example to v4.1.1. In the package.json all I changed is the following:

"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1"

Everything stopped working. Could you please help me build this app working in React Router v4.1.1? There is no proper documentation for react routerv4.1.1 server side rendering. So struck with this new version.

Since React Router v4.1.1 is a major change, answering this question will help a lot of us, in the form of first proper tutorial for React Router v4.1.1.

Chandramohan
  • 7
  • 4

2 Answers2

2

React Router v4 is very different from the previous versions, you can't just change the version number and expect everything to work smoothly. Go through the docs and the examples. Change the app step by step.

Useful links:

https://reacttraining.com/react-router/web/guides/server-rendering

http://rants.broonix.ca/upgrading-to-react-router-v4/

Moving from react router 3.x to 4.x

Community
  • 1
  • 1
Moe
  • 3,467
  • 1
  • 19
  • 25
2

A few things changed when React Router 4!

First, the names of the packages changed. So you have to update your imports from 'react-dom' to 'react-router-dom'. You still need to include 'react' and 'react-router' as well.

Second, there are multiple Browsers now. So you have to import BrowserRouter instead of just Router. (You can also use HashRouter, but I'd say start with BrowserRouter.)

See:

import { 
  BrowserRouter as Router, 
  Route
} from 'react-router-dom';

Start there and keep going. Good luck!

Mark Berry
  • 124
  • 10