Route splitting

Let's hop back to App.js, and bring it all together.

First, we'll eliminate App's dependence on the three containers. Replace those imports with an import for AsyncComponent so that the top of the file looks like this:

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
import AsyncComponent from './AsyncComponent';
import NotificationResource from '../resources/NotificationResource';
import './app.css';

Next, we will define three load() functions, one for each container. These are the functions we'll pass to asyncComponent. They must return a promise:

const loadLogin = () => {
 return import('./LoginContainer').then(module => module.default);
};

const loadChat = () => {
 return import('./ChatContainer').then(module => module.default);
};

const loadUser = () => {
 return import('./UserContainer').then(module => module.default);
};

Behold the magic of conditional imports. When these functions are called, the three...