react-router Route organization question

Does not work

/** @jsx React.DOM */
var React = require('react');
var Router = require('../../index');
var Route = Router.Route;
var Routes = Router.Routes;
var Link = Router.Link;

var App = React.createClass({
  render: function() {
    return (
      <div className="App">
        <Link to="abc">abc</Link><br />
        <Link to="def">def</Link><br />
        <Link to="ghi">ghi</Link><br />
        <Link to="jkl">jkl</Link><br />
        <Link to="mno">mno</Link><br />
        <Link to="pqr">pqr</Link><br />
        <Link to="stu">stu</Link><br />
        <Link to="vwx">vwx</Link><br />
        <div>
          {this.props.activeRouteHandler() || <div>Home</div>}
        </div>
      </div>
    );
  }
});

var build = function(name) {
  return React.createClass({
    render: function(){
      return (
        <div>
          <p>{name}</p>
          {this.props.activeRouteHandler()}
        </div>
      );
    }
  });
};

var RouteAbc = React.createClass({
  render: function() {
    return (
      <Route name='abc' path='/abc' handler={build('abc')}>
        <Route name='def' path='/abc/def' handler={build('def')} />
        <Route name='ghi' path='/abc/ghi' handler={build('ghi')} />
        <Route name='jkl' path='/abc/jkl' handler={build('jkl')} />
      </Route>
    );
  }
});

var RouteMno = React.createClass({
  render: function() {
    return (
      <Route name='mno' path='/mno' handler={build('mno')}>
        <Route name='pqr' path='/abc/pqr' handler={build('pqr')} />
        <Route name='stu' path='/abc/stu' handler={build('stu')} />
        <Route name='vwx' path='/abc/vwx' handler={build('vwx')} />
      </Route>
    );
  }
});

var routes = (
  <Routes>
    <Route path='/' handler={App}>
      <RouteAbc />
      <RouteMno />
    </Route>
  </Routes>
);

React.renderComponent(routes, document.getElementById('example'));

Works

/** @jsx React.DOM */
var React = require('react');
var Router = require('../../index');
var Route = Router.Route;
var Routes = Router.Routes;
var Link = Router.Link;

var App = React.createClass({
  render: function() {
    return (
      <div className="App">
        <Link to="abc">abc</Link><br />
        <Link to="def">def</Link><br />
        <Link to="ghi">ghi</Link><br />
        <Link to="jkl">jkl</Link><br />
        <Link to="mno">mno</Link><br />
        <Link to="pqr">pqr</Link><br />
        <Link to="stu">stu</Link><br />
        <Link to="vwx">vwx</Link><br />
        <div>
          {this.props.activeRouteHandler() || <div>Home</div>}
        </div>
      </div>
    );
  }
});

var build = function(name) {
  return React.createClass({
    render: function(){
      return (
        <div>
          <p>{name}</p>
          {this.props.activeRouteHandler()}
        </div>
      );
    }
  });
};

var RouteAbc = React.createClass({
  render: function() {
    return (
      <Route name='abc' path='/abc' handler={build('abc')}>
        <Route name='def' path='/abc/def' handler={build('def')} />
        <Route name='ghi' path='/abc/ghi' handler={build('ghi')} />
        <Route name='jkl' path='/abc/jkl' handler={build('jkl')} />
      </Route>
    );
  }
});

var RouteMno = React.createClass({
  render: function() {
    return (
      <Route name='mno' path='/mno' handler={build('mno')}>
        <Route name='pqr' path='/abc/pqr' handler={build('pqr')} />
        <Route name='stu' path='/abc/stu' handler={build('stu')} />
        <Route name='vwx' path='/abc/vwx' handler={build('vwx')} />
      </Route>
    );
  }
});

var routes = (
  <Routes>
    <Route path='/' handler={App}>
      <Route name='abc' path='/abc' handler={build('abc')}>
        <Route name='def' path='/abc/def' handler={build('def')} />
        <Route name='ghi' path='/abc/ghi' handler={build('ghi')} />
        <Route name='jkl' path='/abc/jkl' handler={build('jkl')} />
      </Route>
      <Route name='mno' path='/mno' handler={build('mno')}>
        <Route name='pqr' path='/abc/pqr' handler={build('pqr')} />
        <Route name='stu' path='/abc/stu' handler={build('stu')} />
        <Route name='vwx' path='/abc/vwx' handler={build('vwx')} />
      </Route>
    </Route>
  </Routes>
);

React.renderComponent(routes, document.getElementById('example'));

Seems to me build ought to be just one route with a map of valid :names:

var valid = {
  'abc': true,
  'def': true,
  // ... etc.
};
var Abc = React.createClass({
  willTransitionTo: function() {
    if (!valid[params.name])
      Router.replaceWith('not-found');
  }
});

var routes = (
  <Routes>
    <Route name="abc" path="abc/:name" handler={Abc} />
    <Route name="not-found" handler={NotFound} />
  </Routes>
);

In this example yes, but I was trying to get something abstract out to demonstrate breaking up the routes config. I'd change the names to be more like an actual application if I submitted a pull request.