stormy-gold

How to show root level page not found when I have nested routes with pathless route.

I have this dummy project, at this moment I am able get page not found at root level, but I don't get when the route is /auth/* or /auth/login/* or /auth/signup/*

/
├── about/
└── auth/
    ├── login/
    └── signup/

/
├── about/
└── auth/
    ├── login/
    └── signup/

I tried adding adding notFoundComponent: NotFound to all and this only gave me page not found which is inside the parent route. I also tried to throw notFound from loader

  loader: async () => {
    throw notFound({ routeId: '/' });
  },

  loader: async () => {
    throw notFound({ routeId: '/' });
  },

Here is my code https://github.com/watery-desert/tanstack-notfound-issue/tree/main

4 Replies

stormy-goldOP•8mo ago

Alright the solution is to provide default not found component it mentioned in the doc but lac of example confused me. But its okay 👍 main.tsx

const router = createRouter({
  routeTree,
  defaultNotFoundComponent: NotFound404,
});

const router = createRouter({
  routeTree,
  defaultNotFoundComponent: NotFound404,
});

This works really well. But I don't know how to prevent /auth/login/* and /auth/signup/* show inside _auth layout when invalid route? Alright the solution is to set notFoundMode: 'root' and that will render the root notFound. Instead of rendering inside parent _layout

variable-lime•8mo ago

is there something missing from the docs? https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors#notfoundmode-root

Not Found Errors | TanStack Router React Docs

⚠️ This page covers the newer notFound function and notFoundComponent API for handling not found errors. The NotFoundRoute route is deprecated and will be removed in a future release. See for more inf...

variable-lime•8mo ago

if yes, please create a PR for the docs

stormy-goldOP•8mo ago

Ohh Thanks, made me happy. I will try to do that once I am done with this project.

Gaming

Programming

How to show root level page not found when I have nested routes with pathless route.

Did you find this page helpful?