Lazy routing

Earlier in the chapter, you learned how to split your route declarations by feature. This is done to avoid having a monolithic routes module, which can not only be difficult to decipher, but could also cause performance issues. Think about a large application that has dozens of features and hundreds of routes. Having to load all of these routes and components upfront would translate to a bad user experience.

In this final section of the chapter, we'll look at loading routes lazily. Part of this involves leveraging a loader such as Webpack, the loader used in this example. First, let's take a look at the main App component:

import React, { PropTypes } from 'react'; 
import { Link } from 'react-router'; 
 
// The "App" component is divided into 
// "header" and "content" sections, and will 
// simply render these properties. 
const App = ({ header, content }) => ( 
  <section> 
    <header> 
      {header...