Redux: Adding React Router to the Project

Hi

I have tried to run this example with newer version of react rooter v4, but still I have some issues and the content is not displayed. Could you post some tips how it should be done in this example?

Thanks

Finally I've got up and ruining it with router v4 here are changes needed :

1. Install dependencies npm install --save react-router
   npm install --save react-router-dom

(if you use npm then --save is a default param and you can omit it)

2. Changes in Root.js We need to change type of router from Router to BrowserRouter (it is in new package react-router-dom)

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

....
Then update components. Please watch out on new definition optional parameter now is ? on the end instead of ()

for more see https://reacttraining.com/react-router/web/guides/philosophy

3)Update App.js

There is a small change in a way of passing parameters router will pass match prop which will contains params

const App = ({ match }) => (

....

<VisibleTodoList
  filter={match.params.filter || 'all'}
/>

....

We also update propTypes (this is a quickfix, so I'm not sure it is correct way)

App.propTypes = { match: PropTypes.shape({ params: PropTypes.shape({ filter: PropTypes.string, }) }), };

see more https://jaketrent.com/post/access-route-params-react-router-v4/

4. Update FilterLink.js

Instead of Link we need to use NavLink from react-router-dom. Because the Link has been moved to this package and it has been split to Link and NavLink. The second one knows active state and you can apply your css

import { NavLink } from 'react-router-dom';

..... Please watch out on exact parameter is important in other case all will be always active. Additonaly I had to add / before path

<NavLink exact to={filter === 'all' ? '/' : /${filter}} activeStyle={{ textDecoration: 'none', color: 'red', }}

For more infor see https://reacttraining.com/react-router/web/api/NavLink

Wow, this is so much more friendly than Angular's router. Not sure how powerful it is compared to Angular's v4 router though.

I hope there will be an updated video for the new version of react router v4.

I hope there will be an updated video for the new version of react router v4.

I tried npm i react-router-dom and import { BrowserRouter as Router, Route } from 'react-router-dom'; and it works. Not sure if following videos will give back some bugs.

Maybe I'm alone in this, but I would recommend installing exactly the versions used in the videos, since npm offers that capability. E.g. npm install react-router@2.4.0 in this instance. The purpose of this specific set of videos isn't to teach you the latest and greatest of react-router, or even to provide a comprehensive overview of any version, but rather to communicate general concepts and techniques for using Redux in an idiomatic way, of which incorporating react-router is only one part. I'm sure there are other, dedicated tutorials for newer versions of react-router, and in the meantime you save yourself a lot of headache during these videos by avoiding incompatibilities. As long as the version referenced is still available and still runs, I think that's the better route. My 2c.