React Router Webpack 2 Code Splitting - Using getChildRoutes()

Question

When I navigate to /home I have a navbar that shows a home icon, about, settings, etc. The component that displays this navbar lives inside HomeContainer. Based on the url, I want to load HomeContainer's routes. I'm using wepback 2, code splitting, react router 3.

Here is my routes file

import React from 'react';
import { Router, hashHistory } from 'react-router';
import App from './components/App';
import Portal from './components/portal/Portal';

const componentRoutes = {
  component: App,
  path: '/',
  indexRoute: { component: Portal },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('./components/login/Login')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: 'home',
      getComponent(location, cb) {
        System.import('./components/homepage/HomeContainer')
          .then(module => cb(null, module.default));
      },
      getIndexRoute(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, {
            component: require('./components/homepage/Home'),
          })
        })
      },
      getChildRoutes(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, [
            require('./components/homepage/About').default
          ])
        })
      }
    }
  ]
};

const Routes = () => {
  return <Router history={hashHistory} routes={componentRoutes} />
};

export default Routes;

Problem is, how do I get the about component to render? I want to be able to navigate to /home/about and for it to load, as a child route of HomeContainer.

johnny jiang johnny jiang · Accepted Answer · 2018-04-24T08:24:31

getChildRoutes(partialNextState, callback) {
        require.ensure([], function (require) {
          callback(null, [{
               path: 'about',
               component: require('./components/homepage/About').default
            }            
          ])
        })
}]

React Router Webpack 2 Code Splitting - Using getChildRoutes()

1 Answers