Redux: Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component.
[00:00] To add React Router to the project, I'm running npm install --save react-router. I'm going to import the router component from it, as well as the route configuration component. Now I can replace my app with the router, and it's important that it's inside Provider so that any components rendered by the router still have access to the store.
[00:24] Inside, I put a single route element that tells React Router that I want to render my app component at the root path. If I run the app, I can see that the router matched the path correctly and rendered the app component.
[00:39] If you see weird symbols after a hash sign in the address bar, it means that you're using the version of React Router that doesn't yet default to the browser history, and defaults to hash history instead.
[00:51] To fix it, you can import browser history from React Router and pass it as a history prop to Router. Unless you target very old browsers like IE9, you can always use browser history and have a clean URL in the address bar.
[01:08] Let's recap the changes we made to add React Router to the application. I ran npm install --save react-router, and I imported the router component and the route configuration component from React Router.
[01:23] Instead of rendering the app directly, I replaced it with a router component that has a single route at the root path that renders the app component. In order to avoid hash sign and weird symbols after it, I imported browser history, and I passed it as the history prop to the router component.
Finally I've got up and ruining it with router v4 here are changes needed :
- 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)
- 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/
- 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.
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