How can I create custom error pages in React Router v6?

How can I create custom error pages in React Router v6?

You can create custom error pages in React Router v6 by using the ErrorBoundary component. This allows you to catch errors in your component tree and display a fallback UI.

Can you show me a code example of how to implement that?

Sure! Here's a simple example:

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

function ErrorBoundary({ children }) {
  return (
    <ErrorBoundary>
      {children}
    </ErrorBoundary>
  );
}

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

This will display a custom 404 page for any unmatched routes.

What if I want to handle different types of errors?

You can customize the ErrorBoundary to catch different types of errors by implementing the componentDidCatch lifecycle method and rendering different UI based on the error type.