How do you handle routes that do not exist (404 Not Found) and custom error pages?

Short answer

Add a catch-all route with path="*" at the end of the route tree to show a 404 page, or use errorElement in Data Routers to handle Loader and render errors.

Explanation

In React Router, path="*" matches any URL that did not match an earlier route and displays a friendly Not Found page. Modern routers also use errorElement to catch server exceptions or network failures, and useRouteError to inspect the error type and code.

Code example

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />, // Catches any unexpected error in this branch
    children: [
      { path: "*", element: <NotFoundPage /> }
    ]
  }
]);

Common mistakes

• Putting path="*" at the beginning of the route tree, hiding all valid pages.

Follow-up questions

• How do Data Loading and Loaders work in recent React Router releases (v6.4+ Data APIs)?

Sources

• React Router docs — Error Boundaries