react-router-dom switching between 5000 routes-CodePudding

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?

CodePudding user response：

While this is a popular library, it's worth noting that it is not designed to handle a large number of routes. When you render a large number of routes, the library has to do a lot of work to determine which route to render for a given URL, and this can impact performance.

One way to optimize the performance of your application would be to use a different approach to routing, such as dynamic routing or code-splitting. With dynamic routing, you can use a single route and pass a parameter to the component that determines which page to render. This can reduce the number of routes that the react-router library has to manage, and improve performance.

Code-splitting is another approach that can help improve the performance of your application. This involves splitting your application into smaller chunks, and only loading the code for a particular route when the user navigates to that route. This can help reduce the initial load time of your application, and improve the overall performance.

It's worth noting that the suggestion on the react-router documentation to "probably never need to render a [route] manually" is a recommendation, not a requirement. You can certainly continue to render your routes manually if you prefer, but doing so with a large number of routes can impact performance. Using a different approach, such as dynamic routing or code-splitting, can help improve the performance of your application.

CodePudding user response：

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.