router.jsx

// bootstrap React Router
import React from 'react';
import { default as Router, Route, DefaultRoute, HistoryLocation, RouteHandler } from 'react-router';
import { Splash } from '../components_angular/splash';

import index from './index';
let oceans;
if (!PRODUCTION) {
    oceans = (
        <Route handler={require('./oceans/navigation')} path='oceans'>
            <DefaultRoute handler={Splash}/>
            {require('./oceans/oceans.routes')
                .map(category => category.list) // extract oceans subcategories
                .reduce((memo, list) => memo.concat(list), []) // flatten
                .map((route, i) => {
                    const partial = require('!raw!./oceans/partials/' + route.fileName); //ugh
                    const wrap = require('../components_angular/wrap-angular.jsx');
                    return <Route handler={wrap(partial)} key={i} path={route.baseName} name={route.baseName} />;
                })
            }
        </Route>
    );
}

const routes = (
    <Route handler={RouteHandler}>
        <Route handler={index}>
            <DefaultRoute handler={Splash}/>
        </Route>
        {oceans}
    </Route>
);

Router.run(routes, HistoryLocation, Handler => React.render(<Handler/>, document.getElementById('router')));