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;

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') },