Lazy loading component with suspence

App.js

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

import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';
// Above import loads on load and adds dependencies globally. so it should be commented/removed for lazy loading component.
const Details = React.lazy(() => import('./containers/Details'));
// Lazy loading import doesn't allow Named 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"
            render={() =>
              <Suspense fallback={<span>I am working on it ...</span>}><Details /></Suspense>}
          />
        </React.Fragment>
      </BrowserRouter>
    );
  }
}

// fallback JSX code adds "I am working on it ..." text incase Details component failes to load.

export default App;