Cookbook / Static 404 page

Static 404 page

Any path no route matches answers 404 with a page of your own, rendered once and served as HTML.

1Write the page

The page is a full document, html to body, because it sits outside the layout. With no state, handlers or loader it is static.

pages/NotFoundPage.tsx

export default function NotFoundPage() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>Not found</title>
      </head>
      <body>
        <h1>A wild 404 appeared</h1>
        <a href="/">Back to the Pokédex</a>
      </body>
    </html>
  )
}

2Add the catch-all route

A route whose path is * catches every request that matched nothing else, with HTTP 404. Put it last, outside the layout.

routes.tsx

export const routes = defineRoutes([
  { Component: Layout, children: [{ path: '/', Component: HomePage }] },
  // Outside the layout on purpose: a full document, no loader, no scripts.
  { path: '*', Component: NotFoundPage },
])

3Check the status

~/my-app

$ curl -si http://127.0.0.1:1337/no-such-page | head -3
HTTP/1.1 404 Not Found
content-type: text/html; charset=utf-8
x-powered-by: brust/2.0.0-alpha.3

Note

Paths under the actions prefix are answered by the actions app, not by this page: an unknown action path is a problem+json 404. A loader can also send a 404 for a route that did match, with notFound(...) (see Hello world).

Edit this page on GitHub