Async component

async component.js

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

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

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

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

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

  return AsyncComponent;
}

usage.js

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import asyncComponent from './AsyncComponent';

const AsyncLanding = asyncComponent(() => import('./containers/Landing'));
const AsyncItemView = asyncComponent(() => import('./containers/ItemView'));

class App extends Component {
  render() {
    return (
      <>
        <Route exact path="/" component={AsyncLanding} />
        <Route exact path="/category/:category" component={AsyncLanding} />
        <Route exact path="/category/:category/:id" component={AsyncItemView} />
      </>
    );
  }
}