Route Error Boundaries

React Router v7 handles errors contextually. If a loader or component fails, the nearest ErrorBoundary renders.

Creating an Error Boundary

Export a ErrorBoundary component from your route module.

tsx

1import { isRouteErrorResponse, useRouteError } from "react-router";
2
3export function ErrorBoundary() {
4  const error = useRouteError();
5
6  if (isRouteErrorResponse(error)) {
7    return (
8      <div>
9        <h1>{error.status}</h1>
10        <p>{error.statusText}</p>
11      </div>
12    );
13  }
14
15  return <h1>Something went wrong!</h1>;
16}

This ensures that one broken route doesn't crash the entire application.

Error Handling

Route Error Boundaries

Creating an Error Boundary