Adding React Router to a React App

react-router is a routing library for React, that allows you to declare which components render based on url paths. It’s similar to ng-route and ui-router in AngularJS.

To get started, install react-router npm module:

npm install react-router --save

Full docs are here.

While working on converting an existing web app to React, I ran into a few issues getting my react-router usage working as I wanted.

Here’s my first attempt adding the Router declarations into an existing Container component that renders NavigationComponent – this Component renders a set of navigation links that are common across each of the pages:

<div>
    <NavigationComponent/>
    <Router history={hashHistory}>
        <Route path="/" component={Home}/>
        <IndexRoute component={Home} />
        <Route path="new" component={AddNew} />
        <Route path="search" component={Search} />
    </Router>
</div>

The first error I ran into was this:

Uncaught Error: <Link>s rendered outside of a router context cannot navigate.

Ok, this makes sense, so I need to move the NavigationComponent that renders my Links within <Router> :

<Router history={hashHistory}>
    <Route path="/" component={NavigationComponent}/>
    <IndexRoute component={Home} />
    <Route path="new" component={AddNew} />
    <Route path="search" component={Search} />
</Router>

Routes at the same level replace each other when rendered. To keep the navigation component rendered with the AddNew and Search as child sections of the nav area, nest the Routes as child elements:

<Router history={hashHistory}>
    <Route path="/" component={NavigationComponent}>
        <IndexRoute component={Home} />
        <Route path="new" component={AddNew} />
        <Route path="search" component={Search} />
    </Route>
</Router>

Now, for the NavigationComponent to render it’s child elements, you need to tell it to render:

{this.props.children}

So now this becomes:

render() {
    return (
        <div>
            <div>
                <nav className="navbar navbar-default" role="navigation">
                    <div className="navbar-header">
                        <Link className="navbar-brand" to="/">AddressBook</Link>
                    </div>

                    <div className="collapse navbar-collapse navbar-ex1-collapse">
                        <ul className="nav navbar-nav">
                            <li className="active"><Link to="search">Search</Link></li>
                            <li><Link to="new">New</Link></li>
                        </ul>
                    </div>
                </nav>
            </div>

            <div>
                {this.props.children}
            </div>
        </div>
    )
}

Here’s a good reference for getting started: https://medium.com/reactspeed/create-basic-navigation-components-using-react-router-475bc55a517f#.itkvn5st9