How to use notFoundRoute with file-based routing

[reintroducing]

I've got a pretty basic implementation of the router to give it a POC/test run but I'm struggling to figure out how to implement notFoundRoute in file-based routing. Is there an example available? I looked through the kitchen sink but i don't see it in there, and the docs around this are pretty limited (including, ironically, a 404 link that 404s).

[GuillaumeLaroucheUQAT]

The docs and examples available for the Not-Found Route and the Splat / Catch-All Routes are very limited indeed. The information on how to configuration a Not-Found Route seems to have moved under the Creating a router page.

[allan-vera]

This helped me^ Thank you

[AkshayPathak]

Thanks, however I would like to create a NotFound route for specific hierarchies. The docs in indicate, there is a way to do this, using __404.tsx but there are no examples.

[GuillaumeLaroucheUQAT]

When I use __404.tsx, I get the error : SyntaxError: An identifier or keyword cannot immediately follow a numeric literal. because the route is renamed to 404Import in the generated routeTree.gen.ts so I stick with the information available in the doc.

Personnally, I handle the 404 page in the defaultErrorComponent of the router and throw an error when no data is found by the fetcher in the loader but I don't know if this solution work for you.

import { FileRoute } from "@tanstack/react-router";

export const Route = new FileRoute("/invoice/$invoiceId").createRoute({
	loader: async ({ params: { invoiceId } }) => {
            const invoiceData = await prefetchInvoice(invoiceId);

            if (!invoiceData) {
                throw new NotFoundError("Invoice not found");
            }

            return invoiceData;
        },
       // ...
});

import { Router, ErrorComponent } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

const router = new Router({
	routeTree,
	defaultErrorComponent: ({ error }) => {
		if (error instanceof NotFoundError) {
			return <Custom404Page />;
		}

		return <ErrorComponent error={error} />;
	},
});

[mcmillion]

Are all of the docs around not found pages currently (ironically) not working? All of the links posted just go to the overview page, as does searching for anything related to NotFoundRoute.

[truongtrongtin]

Use notFoundComponent of createRootRoute in __root.tsx file.

[mcmillion]

Yep, just figured this out. Make sure you set the docs version to Latest and don't use search. Search seems to be broken.