react-router: Define multiple route definitions such that components can respond to routes independently with their own RouteHandler

react-router-multiple-routes.js

var React = require('react');
var Router = require('react-router'); // 0.12.4
var {Route, DefaultRoute, RouteHandler, Link, NotFoundRoute} = Router;

/* Components */

var App = React.createClass({
  render: function () {
    return (
      <div className="App">
        <div id="header"></div>
        <div>content</div>
        <div id="footer"></div>
      </div>
    );
  }
});

var Header = React.createClass({
  render: function () {
    return <p>This is the header:<RouteHandler/></p>;
  }
});

var Footer = React.createClass({
  render: function () {
    return <p>This is the footer:<RouteHandler/></p>;
  }
});

var Default = React.createClass({
  render: function() {
    return <span>default view</span>;
  }
});

var HeaderView1 = React.createClass({
  render: function() {
    return <span>header view one</span>;
  }
});

var FooterView1 = React.createClass({
  render: function() {
    return <span>footer view one</span>;
  }
});

var Null = React.createClass({
  render: function() {
    return false;
  }
});

React.render(<App/>, document.body);

/* Routes */

var headerRoutes = (
  <Route name="header" path="/"  handler={Header}>
    <Route name="view1" handler={HeaderView1}/>
    <DefaultRoute handler={Default}/>
    <NotFoundRoute handler={Null}/>
  </Route>
);

Router.run(headerRoutes, function (Handler) {
  React.render(<Handler/>, document.getElementById('header'));
});

var footerRoutes = (
  <Route name="footer" path="/" handler={Footer}>
    <Route name="view1" handler={FooterView1}/>
    <DefaultRoute handler={Default}/>
    <NotFoundRoute handler={Null}/>
  </Route>
);

Router.run(footerRoutes, function (Handler) {
  React.render(<Handler/>, document.getElementById('footer'));
});

In case anyone stumbles upon this, here is a better solution for different parts of the view reacting to different routes. (it's also router agnostic!)