route.js

var Route = React.createClass({ /* magic */ }); // not necessary, handled my Routed's magic
var Link = React.createClass({ /* magic */ });
var Routed = { /* magic */ };

var App = React.createClass({
  mixins: [Routed],

  render: function() {
    return (
      <Root path="/">
        <About path="about"/>
        <Users path="users"/>
        <User path="users/:id">
          <UserAbout path="about"/>
        </User>
      </Root>
    );
  }
});

var Root = React.createClass({
  mixins: [Routed],

  render: function() {
    return (
      <nav>
        <Link to="Root">Home</Link>
        <Link to="About">About</Link>
        <Link to="Users">All users</Link>
      </nav>
      {this.outlet()}
    );
  }
});

var About = React.createClass({
  mixins: [Routed],

  render: function() {
    return <div className="About"><h1>About</h1></div>;
  }
});

var Users = React.createClass({
  mixins: [Routed],

  componentDidMount: function() {
    $.getJSON('/users').then(function(users) {
      this.setState({users: users});
    }.bind(this));
  },

  render: function() {
    var users = this.state.users.map(function(user) {
      return <div><Link to="User" user={user}>{user.name}</Link></div>;
    });
    return <div className="Users">{users}</div>;
  }
});

var User = React.createClass({
  mixins: [Routed],

  componentDidMount: function() {
    if (this.props.user) {
      this.setState({user: user});
    } else {
      $.getJSON('/users/'+this.params.id).then(function(user) {
        this.setState({user: user});
      }.bind(this));
    }
  },

  render: function() {
    var use = this.state.user;
    return (
      <div className="User">
        <h1>{user.name}</h1>
        <nav>
          <Link to="UserIndex">User</Link>
          <Link to="UserAbout" user=user>About</Link>
        </nav>
        {this.outlet()}
      </div>;
    );
  }
});

var UserIndex = React.createClass({
  mixins: [Routed],

  render: function() {
    return <div className="UserIndex"><h2>User Index</h2></div>
  }
});

var UserAbout = React.createClass({
  mixins: [Routed],

  render: function() {
    var user = this.props.user;
    return (
      <div className="UserIndex">
        <h2>About {user.name}</h2>
        <div>{user.description}</div>
      </div>
    );
  }
});