<main></main>
html, body { margin:0; padding: 0}

.top-bar {
  background: black;
  color: white;
  padding: 10px;
  margin-bottom:10px;
}

nav a {
  padding: 10px;  
}

nav a.active {
  color: yellow;
  background:blue;
}

.content {
  padding:10px;
}
var { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } = ReactRouter;

var App = React.createClass({
  
  render: function() {
    var names = ['jane', 'bob', 'martha'];
    return <div className="">
      <div className="top-bar">Yo Router</div>
      <nav>
        <IndexLink to="/" activeClassName="active">Main</IndexLink>
        <Link to="about" activeClassName="active">About</Link>
        <Link to="users" activeClassName="active">Users</Link>
      </nav>
      <div className="content">{this.props.children}</div>    
    </div>
  }
})

var About = React.createClass({
  render: function() {
    return <div>
      Yo Im the about page  
        </div>;
  }
});

var Hello = React.createClass({
  render: function() {
    var name = this.props.params.name;
    return <p>Hello! {name}</p>
  }
});

var Users = React.createClass({
  render: function() {
    return <div>Yo Im the users page</div>;
  }
});

var Index = React.createClass({
  render: function() {
    return <p>List of all items...</p>
  }
});

var Routes = React.createClass({
  render: function() {

    const plainRoutes = [
      { 
        path: '/',        
        component: App,
        indexRoute: { component: Index },
        childRoutes: [
          { path: "about", component: About },
          { path: "users", component: Users },
          { path: "hello/:name", component: Hello  },
        ]
      },      
    ];

    return <Router history={hashHistory} routes={plainRoutes} />
  }
});

ReactDOM.render(<Routes />, document.querySelector('main'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js
  3. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.js