React Lazy Routes

An example React router implementation and demo of lazily loading components with React.lazy and Suspense.

Spinner courtesy of Thunkable

import * as React from 'react';
import Nav from './Nav.jsx';
import { Router } from './routing';

const routes = new Map<string, React.ComponentType>([
  ['/', () => <p>Pick an Ipsum!</p>],
  ['/lorem', React.lazy(() => import('./pages/Lorem'))],
  ['/bacon', React.lazy(() => import('./pages/Bacon'))],
  ['/hipster', React.lazy(() => import('./pages/Hipster'))],
  ['/office', React.lazy(() => import('./pages/Office'))],
]);

const paths = [...routes.keys(), '/missing'].slice(1);

const App = () => (
  <Router routes={routes} initialPath="/" notFound={<p>Route not found</p>}>
    {Page => (
      <>
        <Nav paths={paths} />
        <React.Suspense fallback={<div className="loading-spinner" />}>
          <Page />
        </React.Suspense>
      </>
    )}
  </Router>
);

The App

TODO

Running Locally

To set up:

1. git clone https://github.com/jamesseanwright/react-lazy-routes.git
2. cd react-lazy-routes
3. npm i
4. nvm use

Then you can run one of the following commands:

• npm run dev - builds the project with rollup.js and serves it from port 8080
• npm test - runs the unit tests (append -- --watch to launch Jest's watch mode)