Not-found page

When a customer opens a URL that leads nowhere, they see a large "404", a message, a back-home button and three hook slots. Customise it when you want your own wording, layout or links on the 404.

It has no URL of its own: the router shows it in place of whatever page was asked for.

When it rendersCopy Anchor Link

Change the text and contentCopy Anchor Link

The default page takes its text from your translations, so edit those first:

To add content without replacing the page, fill the notfound:start, notfound:content or notfound:end hook slots from your theme.

Replace the pageCopy Anchor Link

The engine's component is not a public export, and createRouter has no option to swap it. TanStack Router lets you define your own instead:

• For one route. Add notFoundComponent to the route file of a page you have taken over.
• For all routes. Set notFoundComponent on the root route in app/routes/__root.tsx. A notFound() thrown by a child route is handled by the nearest route that defines one.

import { createFileRoute, Link } from '@tanstack/react-router';
import {
  ProductListing,
  type ProductListLoaderData,
} from '@salla.sa/twilight-theme-engine/routes/product-listing';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/brands/$id')({
  loader: ({ params }): Promise<ProductListLoaderData> =>
    ProductListing.loader({ params: { source: 'brands', id: params.id }, locale: params.locale }),
  head: withHead(ProductListing),
  component: () => <ProductListing.Component {...Route.useLoaderData()} />,
  // Shown when the brand does not exist (the loader calls notFound())
  notFoundComponent: () => (
    <div className="container py-16 text-center">
      <h1>This brand is gone</h1>
      <Link to="/brands">See all brands</Link>
    </div>
  ),
});

A findOrThrow that gets a 404 or 410 calls the same notFound(), so your notFoundComponent covers it too. To raise a not-found yourself, call notFound() from @salla.sa/twilight-theme-engine/providers in your loader. The exact notFoundComponent rules belong to TanStack Router, so check its documentation for your version.

Edge casesCopy Anchor Link

• Short links never flash a 404. While the lookup runs the page renders nothing.
• Server errors are separate. Any other failed request in a loader shows the router's error page (400 or a generic error), not a 404.

See alsoCopy Anchor Link

• SEO redirects, for short links
• Product page, Category page and Brand page
• Overview and Routes and pages