lazy loading with hoc

App.js

import React, { Component} from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';

import Welcome from './containers/Welcome';
import Home from './containers/Home';
import asyncComponent from './containers/hoc/asyncComponent';
//import Details from './containers/Details';

const AsyncComponent = asyncComponent(() => {
     // Pass the component which you want to load dynamically. 
     return import('./containers/Details');
});
// aync compoent returns some dynamically loaded component

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <React.Fragment>
          <nav>
            <NavLink to="/home">Home Page</NavLink> |&nbsp;
            <NavLink to="/details">Details Page</NavLink>
          </nav>
          <Route path="/" component={Welcome} exact />
          <Route path="/home" component={Home} />
          <Route path="/details" component={AsyncComponent}/>
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

export default App;