Skip to content

Instantly share code, notes, and snippets.

@adjavaherian
Last active February 6, 2022 05:31
Show Gist options
  • Save adjavaherian/aa48e78279acddc25315 to your computer and use it in GitHub Desktop.
Save adjavaherian/aa48e78279acddc25315 to your computer and use it in GitHub Desktop.
A simple React Router for debugging your route configurations
//quickly test the react-router route configurations
//npm i babel
//babel RouterTest.jsx | node
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
var NotFoundRoute = Router.NotFoundRoute;
var routesWithHeader = ['/page', 'page2'];
var Header = React.createClass({
render: function(){
return (
<div>
<header>The Header</header>
<RouteHandler />
</div>
)
}
});
var Page = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
render: function(){
return (
<div>
<span>The Page</span>
</div>
)
}
});
var NotFound = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
render: function(){
return (
<div>
<span>Not Found</span>
</div>
)
}
});
var Area = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
render: function(){
var area = this.context.router.getCurrentParams();
console.log('area params', area);
return (
<div>
<span>area page {area.area}</span>
</div>
)
}
});
var App = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
getInitialState: function() { return {'foo' : 'bar'} },
render: function(){
console.log(this.context.router.getCurrentPath());
var header = routesWithHeader.indexOf(this.context.router.getCurrentPath()) > -1 ? <Header /> : null;
return (
<html>
<RouteHandler header={header} />
</html>
)
}
});
var AppRoutes = [
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Page} />
</Route>,
<Route handler={App} someProp="defaultProp">
<Route path="/" handler={Header} >
<Route path="/withheader" handler={Page} />
</Route>
</Route>,
<Route handler={App} someProp="defaultProp">
<Route path=":area" handler={Area} />
<Route path=":area/:city" handler={Area} />
<Route path=":area/:city/:locale" handler={Area} />
<Route path=":area/:city/:locale/:type" handler={Area} />
</Route>
];
['', '/', '/withheader', 'SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
Router.run(AppRoutes, path, function(Handler, state){
var output = React.renderToString(<Handler/>);
console.log(output, '\n');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment