How can I implement code splitting in React Router v6?

How can I implement code splitting in React Router v6?

You can implement code splitting in React Router v6 using React's lazy and 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, { lazy, Suspense } 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 code will split the Home and About components.

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 create an ErrorBoundary?

Certainly! An ErrorBoundary is a React component that catches JavaScript errors in its child component tree. Here's a simple implementation:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

You can wrap your Suspense component with this ErrorBoundary.