title: Code Splitting by using react router v4
body: <p>In react router v3 i have implemented the code splitting using <code>System.import</code>, Now i want to upgrade my app to react-router-v4 but the problem is that i am unable to split my code.</p>
  
  <blockquote>
    <p>My <code>routes.js</code> file</p>
  </blockquote>
  
  <pre><code>function errorLoading(error) {
    throw new Error(`Dynamic page loading failed: ${error}`);
  }
  
  function loadRoute(cb) {
    return module =&gt; cb(null, module.default);
  }
  
  module.exports = {
    path: '/',
    indexRoute: {
      getComponent(location, cb) {
        System.import('../pages/IndexPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    childRoutes: [{
      path: 'notifications',
      indexRoute: {
        getComponent(location, cb) {
          System.import('../pages/NotificationPage')
            .then(loadRoute(cb))
            .catch(errorLoading);
        }
      },
    }]
  };
  </code></pre>
  
  <p>and then i just imported the routes in my <code>index.js</code> file and rendered them to rootNode like </p>
  
  <pre><code>ReactDOM.render(
    &lt;AppContainer&gt;
      &lt;ApolloProvider store={store} client={client}&gt;
        &lt;Router
          history={browserHistory}
          routes={routes}
        /&gt;
      &lt;/ApolloProvider&gt;
    &lt;/AppContainer&gt;,
    rootNode
  );
  </code></pre>