05. Adding React Router to the Project

Video Link

In this lesson, we will add React Router.

Root.js Before

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
import App from './App';

const Root = ({ store }) => (
  <Provider store={store}>
    <App />
  </Provider>
);
.
.
.

To add React Router to the project, run: $ npm install --save react-router

Inside of Root.js we will import the Router and Route components.

We also replace our <App /> with <Router />. It's important that it is still inside of <Provider /> so that any components rendered by the router still have access to the store.

Inside of <Router /> we will put a single <Route /> element that tells React Router that we want to render our <App /> component at the root path ('/') in the browser's address bar.

Root.js After

import React, { PropTypes } from 'react';
import { Provider } from 'react-redux';
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>
);
.
.
.

Note: the video contains a fix for weird address bar symbols stemming from an old release of react-router

Recap at 1:09 in video