Setting up the Routing Structure

Outline

React router uses components to map URLs to views. Let's start out by importing Router, Route, IndexRoute, and hashHistory from react-router, and declare the routing hierarchy in the ReactDOM.render() call.

Build out the initial React router setup

src/index.js

import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux'; 
import App from './components/App';
import store from './store';

+ import { Router, Route, IndexRoute, hashHistory } from 'react-router';

ReactDOM.render((
    <Provider store={store}>
+   <Router history={hashHistory}>
+       <Route path="/" component={App}>
+       </Route>
+   </Router>
-  <App />
    </Provider> 
), document.getElementById('root'));

The Router component instantiates the router, and then Route creates a route for URLs that says URLs that start with "/" render the App component. Routes can be nested, so let's create two nested routes.

Add the following nested routes

src/index.js

// ...

import store from './store';
+ import Home from './components/Home';
+ import Login from './components/Login';

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

ReactDOM.render((
    <Provider store={store}>
        <Router history={hashHistory}>
            <Route path="/" component={App}>
+           <IndexRoute component={Home} />
+           <Route path="login" component={Login} />
            </Route>
        </Router>
    </Provider> 
), document.getElementById('root'));

The first route is an IndexRoute that displays the Home component. This means that going to 'localhost:4000' will show the App component with the Home component underneath. The second component will be the Login component, which will display the login form, so when you navigate to '/login', you'll see the App component with the Login component underneath (to be created in the next chapter).

Now that your routing structure says which component should render within the App component, the App component can no longer hard-code the Home component, so we'll need to remove it. The component to be rendered is represented by the props.children property, and the App.contextTypes snippet tells react-router to attach the children property to this component's props.

Render routed child components within the App component

src/components/App.js

import Header from './Header';
import Home from './Home';
import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  appName: state.appName
});

class App extends React.Component {
  render() {
    return (
      <div>
        <Header appName={this.props.appName} />
-           <Home />
+       {this.props.children}
      </div>
    );
  }
}

+ App.contextTypes = {
+ router: React.PropTypes.object.isRequired
+ };

export default connect(mapStateToProps, () => ({}))(App);

Now let's build that Login component that's preventing you from seeing a working app :)

Go Pro to unlock all content & remove ads

Setting up the Routing Structure

Outline

Outline

I finished! On to the next chapter