react-router.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router';

const App = React.createClass({
  render() {
    const { children } = this.props;
    return (
      <div>
        {/* you can insert the menu here */}
        {children}
      </div>
    );
  }
});

const contacts = [
  { id: 1, name: 'Jon Snow', email: '[email protected]'},
  { id: 2, name: 'Ygritte', email: '[email protected]'},
];

const ContactList = React.createClass({

  render() {
    return (
      <ul>
      {contacts.map(contact => {
        return(
          <li>
            <Link to={`/contacts/${contact.id}`}>
              {contact.name} - {contact.email}
            </Link>
          </li>
        );
      })}
      </ul>
    );
  }
});

const ContactDetail = React.createClass({
  render() {
    const { params } = this.props;

    if(!params.id) return null;

    return (
      <div>
        <h2>Contact Detail</h2>
        <Link to='/contacts'>List all contacts</Link>
      </div>
    );
  }
});

const NotFound = React.createClass({
  render() {
    return (<div>Page Not Found</div>);
  }
});

render((
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Route path='contacts' component={ContactList}/>
      <Route path='contacts/:id' component={ContactDetail} />
      <Route path='*' component={NotFound}/>
    </Route>
  </Router>
), document.getElementById('root'));