How to Configure Lazy Loading for Components in React Router?

React Router enables lazy loading of components by leveraging React's React.lazy() and Suspense components. Below are the basic steps to implement lazy loading with React Router:

1. Implementing Dynamic Imports with React.lazy: React.lazy() is a function that allows you to dynamically load components. It enables you to define a component that is automatically loaded upon the first render.

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

1. Wrapping Routes with Suspense: In your application, you need to wrap the lazy-loaded routes with the Suspense component. Suspense allows you to specify a fallback indicator (such as a spinner) that is displayed while the lazy-loaded component is being loaded.

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/lazy" component={LazyComponent} />
          {/* Other routes */}
        </Switch>
      </Suspense>
    </Router>
  );
}

1. Creating Separate Chunks for Lazy-Loaded Components: When using create-react-app or other build tools, it automatically generates a separate JavaScript chunk file for each component imported via React.lazy(). This means the code is only loaded when needed.

For example, suppose you have a large component BigComponent that you don't want to load initially when the app starts. Instead, you want it to load when the user accesses the corresponding route. You can set it up like this:

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense } from 'react';

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Big Component...</div>}>
        <Switch>
          <Route path="/big-component" component={BigComponent} />
          {/* Other routes */}
        </Switch>
      </Suspense>
    </Router>
  );
}

In the above example, when the user visits the /big-component path, BigComponent is dynamically loaded. The user sees "Loading Big Component..." until BigComponent is loaded and ready to render. This reduces the initial load time of the application and loads resources on demand, improving performance.