Redux: Adding React Router to the Project

Dan Abramov
InstructorDan Abramov
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

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.

Przemysław
Przemysław
~ 7 years ago

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

Przemysław
Przemysław
~ 7 years ago

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)

  1. 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 ()

<BrowserRouter> <Route path="/:filter?" component={App} /> </BrowserRouter>

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/

  1. 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

Kevin Pinny
Kevin Pinny
~ 7 years ago

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

Quang Le
Quang Le
~ 6 years ago

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

Duy Nguyen
Duy Nguyen
~ 5 years ago

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.

J. Matthew
J. Matthew
~ 5 years ago

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.

Markdown supported.
Become a member to join the discussionEnroll Today