remix.run

How to create a custom styled 404 page in remix

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

Solution

  • 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