react-router-dom switching between 5000 routes

Question

I have a reactJS application where I have about 5000 routes and every load of a link in the browser lasts about 6 seconds. If I reduce the number of routes the time needed to load the page decreases.

Routes are declared in App.js like this:

class App extends Component {
  render() {
    return (
          <Switch>
              <Route path='/' exact={true} component={Home}/>
              <Route path='/Department47352List' exact={true} component={Department47352List}/>
              <Route path='/Department47352Edit/:id' exact={true} component={Department47352Edit}/>
              <Route path='/DepartmentType47353List' exact={true} component={DepartmentType47353List}/>
              <Route path='/DepartmentType47353Edit/:id' exact={true} component={DepartmentType47353Edit}/> 
              ........

Is there something I can do to optimize the speed without decreasing the number of routes?

I read on the official react-router-dom page that "You probably never need to render a manually." Is it wrong to do so or is it just a recommendation?

I can definitely reduce the number of routes to 1-2 thousand but still, I think the loading time is too high for 5000 routes, I can run a DB query on a table with over 10 thousand records much faster, in my mind the routes should work faster that any DB... so maybe there is something wrong in my approach?

Answer 1

Lazy loading is a technique that enables us to load a specific component when a particular route is accessed. It exponentially enhances the load time and the loading speed. At the same time, it increases the react application performance.

The React.lazy function lets you render a dynamic import as a regular component.

Before:

import OtherComponent from './OtherComponent';

After:

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

This will automatically load the bundle containing the OtherComponent when this component is first rendered.

React.lazy takes a function that must call a dynamic import() . This must return a Promise which resolves to a module with a default export containing a React component.

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load.

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

The fallback prop accepts any React elements that you want to render while waiting for the component to load. You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.