useRouteError

Detailed Explanation

useRouteError is a React Router Hook used inside Error Boundary components to access the error that crashed the Route. It gives you the actual error Object so you can display a helpful message to the user.

import { useRouteError } from 'react-router-dom';

export default function ErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>Oops! Something went wrong</h1>
      <p>{error.message || "An unexpected error occurred"}</p>
      <a href="/">Go back home</a>
    </div>
  );
}

When a loader or action throws an error (like a failed Database Query or a network timeout), React Router catches it and renders the error boundary instead of the normal page. Inside that error boundary, useRouteError gives you access to what went wrong.

The error object typically contains:

• message: A human-readable description of what failed
• status: The Status Code if the error was an HTTP response (like 404 or 500)
• statusText: Text like "Not Found" or "Internal Server Error"

You configure error boundaries in your route definition with errorElement. useRouteError only works inside that error element component — not in regular components. For catching errors inside components, use Try/Catch instead.