AsyncClientSplit.js

import * as RoutingConstants from './constants/RoutingConstants';
import { Route, Switch } from 'react-router-dom';
import LoadingComponent from './pages/LoadingComponent';
import React, { Component } from 'react';

function asyncComponent(importComponent: Function, LoadingComponent: Function) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : <LoadingComponent />;
    }
  }

  return AsyncComponent;
}


const Products = asyncComponent(() => import('./pages/Products'), LoadingComponent);
const Homepage = asyncComponent(() => import('./pages/Homepage'), LoadingComponent);
const AboutUs = asyncComponent(() => import('./pages/AboutUs'), LoadingComponent);


class App extends Component<{}, {}> {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path={'/'} component={Homepage} />
          <Route exact path={'/products'} component={Products} />
          <Route exact path={'/about-us'} component={AboutUs} />
        </Switch>
      </div>
    );
  }
}