Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Redux: Adding React Router to the Project

1:43 JavaScript lesson by

We will learn how to add React Router to a Redux project and make it render our root component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We will learn how to add React Router to a Redux project and make it render our root component.

Avatar
Robert Smith

It's worth noting that React Router have recently released v4. In order to follow this tutorial you will need to install v3.

In reply to egghead.io

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.

Root.js

import { Router, Route } from 'react-router';
import App from './App';

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>

    </Router>
  </Provider>
);

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.

[output](../images/javascript-redux-adding-react-router-to-the-project-output.png)

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 browserHistory, and defaults to hash history instead.

To fix it, you can import browserHistory from React Router and pass it as a history prop to Router. Unless you target very old browsers like IE9, you can always use browserHistory and have a clean URL in the address bar.

Root.js

import { Router, Route browserHistory} from 'react-router';
import App from './App';

const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path='/' component={App} />
    </Router>
  </Provider>
);

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.

Root.js

import { Router, Route browserHistory} from 'react-router';

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 browserHistory, and I passed it as the history prop to the Router component.

Root.js

const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={browserHistory}>
      <Route path='/' component={App} />
    </Router>
  </Provider>
);


HEY, QUICK QUESTION!
Joel's Head
Why are we asking?