Skip to content
An example React router implementation and demo of lazily loading components with React.lazy and Suspense
TypeScript JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
misc
src
test
.gitignore
.nvmrc
.prettierrc
README.md
jest.config.js
package-lock.json
package.json
rollup.config.js
tsconfig.json

README.md

React Lazy Routes

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

Screencap of the app

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)
You can’t perform that action at this time.