How can I implement lazy loading with React Router?

How can I implement lazy loading with React Router?

You can implement lazy loading in React Router using the React.lazy function along with Suspense. This allows you to load components only when they are needed.

Can you show me a code example?

Sure! Here's a simple example:

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

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path='/' exact component={Home} />
          <Route path='/about' component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

This code will load the Home and About components only when their respective routes are accessed.

What happens if the component fails to load?

If a component fails to load, you can handle the error by using an error boundary. You can wrap your Suspense component with an error boundary to catch any loading errors and display a fallback UI.