How to create a custom styled 404 page in remix

user_3407208 0
Viewed 418

Hello how do i style and create a custom 404 page in remix.

I want to override the current 404 page with my own content when a path is recognized.

enter image description here

remix.run
2 Answers

You can edit the CatchBoundary in root.tsx/root.tsx and return whatever you want to render.

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <html>
      <head>
        <title>Oops!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <h1>
          {caught.status} {caught.statusText}
        </h1>
        <Scripts />
      </body>
    </html>
  );
}

Relevant documentation here: https://remix.run/docs/en/v1/guides/not-found#root-catch-boundary

user_37911520

TLDR;

Create a routes/$.jsx file. Optionally you can add this loader in that route in order to get an HTTP 404 status code.

export const loader = () => {
  return json(null, { status: 404 });
};

Link to doc

A wider perspective

You should show custom ui on 3 types of errors:

  • unexpected errors like Cannot read properties of undefined (ErrorBoundary in root.tsx)
  • expected errors like custom logic return json({ errors: [{code: "unpaid", message: "user didnt pay"}] }) (CatchBoundary in root.tsx)
  • 404 (Splat route $.tsx in routes/)

Also you can define a ErrorBoundary/CatchBoundary for each nested route if you think that will give the user a better ux (like in tabs or folders).

user_37444000
Related