route-based.jsx

import React from 'react';
import withSuspense from './withSuspense'; // A HOC that just wraps the component with a `<React.Suspense />`.

const ProductListPage = React.lazy(
  () => import('./ProductListPage')
);

const ProductDetailsPage = React.lazy(
  () => import( './ProductDetailsPage')
);

const App = () => {
  return (
    <Router>
      <Route 
        path="products" 
        component={withSuspense(ProductListPage)} 
      />
      <Route 
        path="products/:id" 
        component={withSuspense(ProductDetailsPage)} 
      />
    </Router>
  )
}