Does not support the top level route yet, easy enough to add though. babel stage 1 needed I think?

app.js

import React from 'react';
import Router from 'react-router';
import _ from 'lodash';

class MegaRouteHander extends React.Component {
  static contextTypes = {
    megaApi: React.PropTypes.object.isRequired,
    routeDepth: React.PropTypes.number.isRequired,
    router: React.PropTypes.func.isRequired
  };

  getState() {
    const route = this.context.router.getCurrentRoutes()[this.context.routeDepth];
    const api = this.context.megaApi;

    if (!route) {
      return null;
    }

    const params = this.context.router.getCurrentParams();
    const query = this.context.router.getCurrentQuery();

    const handler = route.handler;
    const dataRequire = handler.requireDataTypes(api);

    const results = _.map(dataRequire, (model, modelName) => {
      const query = _.map(model.query, (v, k) => { // this needs to be reduce to ignore missing url params or something
        return {[k]: this.context.router.getCurrentQuery()[v]};
      });

      return api[modelName].fetch(query);
    });

    return results;
  }

  render() {
  	return (
      <Router.RouteHandler {... Object.assign(this.props, this.getState())}>
        {this.props.children}
      </Router.RouteHandler>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        Hi {this.props.user.getState().firstName}
        <button onClick={this.props.user.logout}>Logout</button>
        <MegaRouteHander/>
      </div>
    );
  }
}

index.js

import React from 'react';
import Router from 'react-router';

import App from './app';
import User from './user';

// mock api cause fuck making this one work
let onChange = () => console.error('onchange not set');
const stackApi = {
  PropTypes: {
    user: {isRequired: true}
  },
  project: {
    fetch(query) {
      console.log(query, '!');
      onChange(query);
    },
    getState() {
      return {'lol': true}
    }
  },
  user: {
    fetch(query) {
      console.log(query, '!');
      onChange(query);
    },
    getState() {
      return {'lol': true}
    }
  },
  replaceChange(cb) {
    onChange = cb;
  }
}

const routes = (
  <Router.Route name="app" path="/" handler={App}>
    <Router.Route name="user" path="/user" handler={User}/>
  </Router.Route>
);

import runLoop from './run';

runLoop(stackApi, routes);

run.js

import React from 'react';
import Router from 'react-router';
import _ from 'lodash';

export default function run(Api, routes) {

  Router.run(routes, (Handler, state) => {
    // someone good at reduce make this good
    const render = function(top) {
      React.withContext({megaApi: Api}, () => React.render(<Handler {...top}/>, document.body));
    }.bind(null, Api);

    Api.replaceChange(render);
    render();
  });
}

user.js

import React from 'react';

export default class User extends React.Component {
  static requireDataTypes(schema) {
    return {
      user: {
        model: schema.user.isRequired, // implicit  actions.user.fetch(params.userId);
        query: {
          id: 'userId',
        },
        fields: ['firstName'],
      },

    };
  }

  render() {
    console.log(this.props);
    return <span>{this.props}</span>
  }
}