react-router with multiple route definitions

multiple-route-defs.js

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

var App = React.createClass({
  render: function () {
    return (
      <div className="App">
        <div id="header">
          <Header/>
        </div>
        <div>content</div>
        <div id="footer">
          <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;
  }
});

var routes = (
  <Route handler={App}>
    <DefaultRoute handler={Null}/>
    <NotFoundRoute handler={Null}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

var headerRoutes = (
  <Route name="header" path="/"  handler={Header}>
    <Route name="view1" handler={HeaderView1}/>
    <DefaultRoute handler={Default}/>
  </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}/>
  </Route>
);

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

naive-use.js

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

var App = React.createClass({
  render: function () {
    return (
      <div>
        <RouteHandler/>
      </div>
    );
  }
});

var View1 = React.createClass({
  render: function() {
    return (
      <div>
        <p>This is the header: <HeaderView1/></p>
        <p>content</p>
        <p>This is the footer: <FooterView1/></p>
      </div>
    );
  }
});

var Default = React.createClass({
  render: function() {
    return (
      <div>
        <p>This is the header: <HeaderDefault/></p>
        <p>content</p>
        <p>This is the footer: <FooterDefault/></p>
      </div>
    );
  }
});

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 HeaderDefault = React.createClass({
  render: function() {
    return <span>header default</span>;
  }
});

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

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

var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="view1" handler={View1}/>
    <DefaultRoute handler={Default}/>
    <NotFoundRoute handler={Null}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});