Webpack's async code splitting with React Router

createAsyncPage.jsx

'use strict';

var React = require('react');

function createAsyncHandler(getHandlerAsync, displayName) {
  var Handler = null;

  return React.createClass({
    displayName: displayName,

    statics: {
      willTransitionTo(transition, params, query, callback) {
        getHandlerAsync().then(resolvedHandler => {
          Handler = resolvedHandler;

          if (!Handler.willTransitionTo) {
            return callback();
          }

          Handler.willTransitionTo(transition, params, query, callback);
          if (Handler.willTransitionTo.length < 4) {
            callback();
          }
        });
      },

      willTransitionFrom(transition, component, callback) {
        if (!Handler || !Handler.willTransitionFrom) {
          callback();
        }

        Handler.willTransitionFrom(transition, component, callback);
        if (Handler.willTransitionFrom.length < 3) {
          callback();
        }
      }
    },

    render() {
      return <Handler {...this.props} />;
    }
  });
}

module.exports = createAsyncHandler;

@strangeworks check this out: https://github.com/webpack/webpack/tree/060ba5eab7d1c0785a47d0591b4808dbfec59777/examples/code-splitting-harmony

note the branch

Any chance this gist can be updated for latest RR? Tried doing it myself but wasn't able to do it...The willTransitionTo/From hooks aren't a thing anymore, I think.

+1, can you update the code?)

I just researched a bunch of this, and settled on https://github.com/luqin/react-router-loader. It has considered several other forks of loaders and appears to be maintained.

Here's a gist of the dynamic auth-flow example using jsx syntax:
https://gist.github.com/rosskevin/de55079e0d48f046fb518e45bb4f12b1