How can I implement lazy loading with React Router v6?

How can I implement lazy loading with React Router v6?

You can implement lazy loading in React Router v6 using the React.lazy function along with Suspense. Here's a basic example.

Can you show me a code snippet for that?

Sure! Here's a simple example:

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

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

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

This will load the Home and About components only when they are needed.

What happens if the component fails to load?

If the component fails to load, you can handle errors by using the ErrorBoundary component. You can wrap your Suspense component with an ErrorBoundary to catch any loading errors.