Code Splitting React js

App.js

// Dynamically imported components
const RegisterPage = asyncComponent(() =>
  import('./register/RegisterPage').then(module => module.default)
)
const SearchPage = asyncComponent(() =>
  import('./search/SearchPage').then(module => module.default)
)
const ReportPage = asyncComponent(() =>
  import('./report/ReportPage').then(module => module.default)
)

<Route path="/" exact render={() => <Redirect to="/register" />} />
<Route path="/register" component={Routes.RegisterPage} />
<Route path="/search" component={Routes.SearchPage} />
<Route path="/report" component={Routes.ReportPage} />

AsyncComponent.js

import React, { Component } from "react";
export default function asyncComponent(getComponent) {
    class AsyncComponent extends Component {
        static Component = null;
        state = { Component: AsyncComponent.Component };

        componentWillMount() {
            if (!this.state.Component) {
                getComponent().then(Component => {
                    AsyncComponent.Component = Component
                    this.setState({ Component })
                })
            }
        }
        render() {
            const { Component } = this.state
            if (Component) {
                return <Component {...this.props} />
            }
            return null
        }
    }
    return AsyncComponent;
}