Dynamic loading helpers for React Router

route-helpers.js

const loadRoute = (next) =>
  (module) =>
    next(null, module.default);

const loadRoutes = (next) =>
  (modules) =>
    next(null, modules.map(module => module.default));

const loadRouteComponent = (importer) =>
  (location, next) =>
    importer()
    .then(loadRoute(next))
    .catch(console.error);

const route = (path, importer) => ({
  path,
  getComponent: loadRouteComponent(importer),
});

const routes = (config) =>
  Object.keys(config).map(path =>
    route(path, config[path])
  );

export {
  loadRoute,
  loadRoutes,
  loadRouteComponent,
  route,
  routes,
};

routes.js

import { routes } from './route-helpers';

import App from './components/app';

const rootRoute = {
  component: App,
  childRoutes: routes({
    '/': () => System.import('./home'),
    about: () => System.import('./about'),
    blog: () => System.import('./blog'),
  }),
};

export default rootRoute;

This saves you writing out in full each time:

const rootRoute = {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, next) {
        System.import('./home')
        .then(module => next(null, module.default))
        .catch(console.error);
      }
    },
    {
      path: 'about',
      getComponent(location, next) {
        System.import('./about')
        .then(module => next(null, module.default))
        .catch(console.error);
      }
    },
    {
      path: 'blog',
      getComponent(location, next) {
        System.import('./blog')
        .then(module => next(null, module.default))
        .catch(console.error);
      }
    }
  ]
};

It'd be nice to be able to write:

routes({
  'about': './about'
});

and have that dynamically resolve into System.import(./routes/${componentPath}), but it doesn't seem to be supported yet with webpack 2.

Thanks for this tip. I'm moving my applications to use this methodology but I'm facing a problem that I don't know how to solve. The static approach allows to do <IndexRedirect to="home" /> so when the user goes to / ends up at /home. Any idea how to do the "index redirect" with the dynamic-routes-object?

Found the solution: indexRoute: { onEnter: (nextState, replace) => replace('/home') },