Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Last active August 29, 2015 14:16
Show Gist options
  • Save jdlehman/2c4a3b1ec30917069ebb to your computer and use it in GitHub Desktop.
Save jdlehman/2c4a3b1ec30917069ebb to your computer and use it in GitHub Desktop.
react-router with multiple route definitions
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'));
});
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment