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;

@Schniz, thank you! Apologies for the delayed response but that seemed to have solved the problem. I guess those unfamiliar constructs in gaearon's gist belong to the ES6 spec.

@gaearon Thanks for sharing the code. Line 29 is missing return.

@gaearon this is awesome, thank you!

This is pretty neat, but does have some unfortunate side-effects.

For example the component param that will be passed to willTransitionFrom will reference the component returned from createAsyncHandler — not Handler. This isn’t a deal-breaker but does mean that this isn’t fool-proof.

Which I guess you can hack around if you’re happy to reach in and grab a reference to the component when it renders. Pretty shady though. :/

componentDidMount: {
  if (Handler) {
    HandlerComponent = this.refs.component;
  }
}

Handler.willTransitionFrom(transition, HandlerComponent, callback)

Is it possible to use this example with es6 harmony modules?

Have you tried with isomorphic ensure? : https://github.com/tomekwi/isomorphic-ensure

@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