handle 404 page in react router V7 framework

[Eng1Mahmoud]

how handle 404 page in react router V7 framework

[DiederikvandenB]

You can just throw a 404 from your loader:

export async function loader({ params }: Route.ActionArgs) {
  let project = await fakeDb.getProject(params.id);
  if (!project) {
    // throw to ErrorBoundary
    throw data(null, { status: 404 });
  }
  return project;
}

And then check for it in your error boundary: (lifted from https://reactrouter.com/tutorials/address-book#the-root-route)

if (isRouteErrorResponse(error)) {
  message = error.status === 404 ? "404" : "Error";
  details =
    error.status === 404
      ? "The requested page could not be found."
      : error.statusText || details;
}

[Eng1Mahmoud]

@DiederikvandenB what I mean is handle style and customize it as exists in next.js by adding a not-found file in the app directory

[ivan-kleshnin]

Styles and markup are in the function export function ErrorBoundary() {...} in the root.tsx file.