title: React router 4 - routing + code splitting, with webpack 1.9
body: <p>I'm trying to upgrade a 2 year old react codebase to use the latest react and react-router. I haven't touched the webpack config at all, and I'm assuming I wouldn't need to. I'm new to the react world, so please bear with me. I have a few questions that I'll bundle into this one question, so it'll be fairly long.</p>
  
  <ol>
  <li>Bundles:</li>
  </ol>
  
  <p>The webpack config loads a js file as an entry point.</p>
  
  <pre><code>var entry = { appBundle : ["./src/index.js"] }
  </code></pre>
  
  <p>and in index.js, we're doing something like:</p>
  
  <pre><code>var mainRoutes = {
      component: "div",
      childRoutes: [
      {
         path: "/",
         component: require("./components/LandingPage.jsx"),
         childRoutes: [
              require("./components/dashboard"),
              ..
              ..
         ]
      }
  }
  </code></pre>
  
  <p>and then,</p>
  
  <pre><code>React.render(
     React.createElement(Router, { history: browserHistory, routes: mainRoutes }),
     document.getElementById("app-container")
   );
  </code></pre>
  
  <p>I've kept the entry point same, but I've changed the content of index.js to something like:</p>
  
  <pre><code>ReactDOM.render((
     &lt;BrowserRouter&gt;
       &lt;LandingPage /&gt;
     &lt;/BrowserRouter&gt;
   ), document.getElementById("app-container"));
  </code></pre>
  
  <p>and inside LandingPage.jsx, I've defined all top-level routes like so:</p>
  
  <pre><code>render() {
      return (     
        &lt;main&gt;
          &lt;Switch&gt;
            &lt;Route path='/dashboard' component={Dashboard}/&gt;
             ..
          &lt;/Switch&gt;
        &lt;/main&gt;
       );
    }
  </code></pre>
  
  <p>The routing works fine and everything is ok. But the difference I see is that webpack used to emit something like:</p>
  
  <pre><code>    Asset              Size                 Chunks           Chunk Names
                                              14 
      appBundle.js       xxx kB               0                appBundle
      dashboard.js       xxx kB               1                dashboard
  
  .. and so on for most components
  </code></pre>
  
  <p>but now it's at:</p>
  
  <pre><code>Asset              Size                 Chunks           Chunk Names
                                          1 
  appBundle.js       xxx kB               0                appBundle
  </code></pre>
  
  <p>so <strong>Q1: am I missing some configurations for creating the bundles as before?</strong></p>
  
  <ol start="2">
  <li>getComponents</li>
  </ol>
  
  <p>In each of our component folder, we have a index.js file, which has content like so:</p>
  
  <pre><code>"use strict";
  
   module.exports = {
     path: "dashboard",
  
     getComponents(location, cb) {
       require.ensure([], (require) =&gt; {
         cb(null, require("./Dashboard.jsx"));
       }, "dashboard");
     }
   };
  </code></pre>
  
  <p>I know getComponents isn't supported anymore in react router v4. Did this piece of code load the component asynchronously (and that created the different bundles?)? </p>
  
  <p><strong>Q2: What should replace getComponents and index.js files?</strong></p>
  
  <ol start="3">
  <li>Nested routes</li>
  </ol>
  
  <p>React router 4 doesn't support nested routes, and I'm supposed to add the  components wherever I need nested routes. But I'm not sure where. Say, our components look like so:</p>
  
  <pre><code>"use strict";
  
   // import stuff
   class DashboardContainer extends React.Component {
     render() {
       return (
         &lt;Dashboard {...this.props} /&gt;
       );
     }
   }
  
   class Dashboard extends React.Component {     
     render() {
       return (
         &lt;div&gt;&lt;/div&gt;
         &lt;SomeOtherComponent/&gt;
       );
     }
   }
  
   export default DashboardContainer;
  </code></pre>
  
  <p>I changed this to (with all other code the same)</p>
  
  <pre><code>class Dashboard extends React.Component {     
         render() {
           return (
             &lt;div&gt;
                 &lt;div&gt;&lt;/div&gt;
                 &lt;SomeOtherComponent/&gt;
                 &lt;Route path='/childComponent' component={ChildComponent}/&gt;
             &lt;/div&gt;
           );
         }
       }
  </code></pre>
  
  <p>but the child component does not render. </p>
  
  <p><strong>Q3: Where do I need to define the child/nested component route?</strong></p>
  
  <p>Let me know if there's any more information needed. Thanks.</p>