A simple trick to dynamically import components in react.

react-dynamic-import.md

AsyncLoadFile.jsx

import React, { Component } from 'react';

export default function asyncComponent(importComponent) {
    class AsyncComponent extends Component {
        /**
        * @constructor
        * @desc Represents AsyncComponent component
        * @param props Properties passed from parent component
        */
        constructor(props) {
            super(props);

            this.state = {
                component: null
            };
        }

        // Returns the needed component markup
        // Can be a single child component or null or false
        render() {
            const C = this.state.component;

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

        // Called after render method
        // Enables DOM manipulations or data fetching operations
        // DOM interactions should always happen here
        async componentDidMount() {
            const { default: component } = await importComponent();

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

use of following component

import AsyncComponentLoad from 'AsyncLoadFile.jsx';

const someComponent = AsyncComponentLoad(() => import('theComponent'));

<Switch>
    <Route
        exact
        path={`${prependUrl}`}
        component={Home} />
</Switch>