adjavaherian/RouterTest.jsx

## RouterTest.jsx
//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');
    });
});
	//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');
	});
	});