How can I use React.lazy with React Router?

How can I use React.lazy with React Router?

You can use React.lazy to dynamically import components in your React Router setup. This allows for code splitting.

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 uses React.lazy to load the Home and About components only when they are needed.

What happens if the component fails to load?

If a component fails to load, you can handle errors by using the ErrorBoundary component. This allows you to catch errors and display a fallback UI.

Can you explain how to implement ErrorBoundary?

Certainly! You can create an ErrorBoundary component that implements componentDidCatch and getDerivedStateFromError to catch errors and update the state accordingly.