Router strawman

foo.entrypoint.js

// You can imagine some shorthand for generating this given a component and
// a Relay query.

import React from 'react';

import getFoo from './getFoo';
import lazyComponent from './lazyComponent';

export default function fooEntrypoint({ fooId }) {
  const Component = lazyComponent(import('Foo'));
  const data = getFoo(fooId);

  return function Foo({ children }) {
    return <Component data={data}>{children}</Component>;
  };
}

foo.route.js

import React from 'react';

import appEntrypoint from './app.entrypoint';
import fooEntrypoint from './foo.entrypoint';

export default {
  entrypoints: {
    App: () => ({
      entrypoint: appEntrypoint,
    }),
    Foo: ({ id }) => ({
      entrypoint: fooEntrypoint,
      params: { fooId: id },
    }),
  },
  render: ({ App, Foo }) => <App><Foo>Content</Foo></App>,
};

routes.js

// This could be auto-generated, maybe?

import rootRoute from './root.route';

export default {
  '/': rootRoute,
  '/foo/:id': () => import('./foo.route'),
};