Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-router Route organization question
/** @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'));
/** @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'));
@ryanflorence
Copy link

ryanflorence commented Aug 11, 2014

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>
);

@mtscout6
Copy link
Author

mtscout6 commented Aug 11, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment