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.

[dennisregalado]

using an error boundary gets tricky when dynamically setting a 404 page from a CMS.

[davidbielik]

Same question here, how do you make a catch-all * route?

I find that ErrorBoundary doesn't have access to root loader data, so would prefer a generic 404 "page"

import type { RouteConfig } from '@react-router/dev/routes';
import { flatRoutes } from '@react-router/fs-routes';
export default [
  ...(await flatRoutes({
    rootDirectory: './routes',
  })
] satisfies RouteConfig;

[sergiodxa]

In routes.ts using route helper you can do route("*", "file-path")

If you're using the flat routes convention, you can do routes/$.tsx.

[davidbielik]

thanks @sergiodxa !

Filed #13764 to help future documentation users.