Will Stone

Site navigation using React Router 3

5th October, 2016

These code snippets demonstrate how to create a Bootstrap compatible header and navigation. The navigation automatically updates as routes are added.

First, add the react-router-active-component plugin:

yarn add react-router-active-component


npm install --save react-router-active-component

This allows an “active” class to be added to the navigation anchor’s parent li element, a feature the built in Link component lacks.


import React from 'react';
import ReactDOM from 'react-dom';

// Pages
import App from './containers/App'; // wrapper
import Start from './containers/Start';
import AnotherPage from './containers/AnotherPage';

// History without ?_k=
import { Route, Router, useRouterHistory } from 'react-router';
import { createHashHistory } from 'history';
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

  <Router history={appHistory}>
    <Route component={App}>
      <Route path="/" component={Start} name="Start"/>
      <Route path="/another-page" component={AnotherPage} name="Another PAge"/>


import React, { Component } from 'react';
import Header from './../components/Header';

class App extends Component {
  render() {
    return (
      <div className="App">

        <Header routes={this.props.routes}/>

        <div className="container">

export default App;


import React, { Component } from 'react';
import { Link } from 'react-router';

// For wrapping Link
import activeComponent from 'react-router-active-component';
let NavItem = activeComponent('li', {linkClassName: 'nav-link'});

class Header extends Component {
  render() {
    return (
      <div className="Header">
        <nav className="navbar navbar-fixed-top navbar-light bg-faded">
          <div className="container-fluid">
            <div className="navbar-header">
              <Link to="/" className="navbar-brand">Create-React-App Playground</Link>
            {/* Main Nav */}
            <ul className="nav navbar-nav pull-xs-right">
              { this.props.routes[0].childRoutes.map ( (route) => <NavItem key={route.path} to={route.path} className="nav-item Header__navItem">{ route.name }</NavItem> ) }

export default Header;

If you would like to comment on this post, feel free to tweet me @will_stone_