TanStackT
TanStack•11mo ago•
8 replies
faint-white

How to nested a 404 and 500 page?

Hi everyone, I'm working with TanStack Router and trying to implement different 404 and 500 error pages for different layouts. I have a __root.tsx layout and a _protected.tsx layout.

My goal is to have a specific 404 page rendered when a route under the _protected layout is not found, without falling back to the 404 defined in __root.tsx.

Currently, I've tried defining a notFoundComponent within _protected.tsx. However, when I navigate to a non-existent route within the _protected layout, it always renders the notFoundComponent defined in __root.tsx instead.

Here's my route structure for context:

here is my route
.
├── __root.tsx
├── _protected
│   ├── (home)
│   │   └── index.tsx
│   ├── data-polis
│   │   └── index.lazy.tsx
│   ├── flagged
│   │   └── index.lazy.tsx
│   ├── reports
│   │   └── index.lazy.tsx
│   ├── utility
│   │   └── index.lazy.tsx
│   └── workbasket
│       ├── filling
│       │   ├── $caseId
│       │   │   └── index.tsx
│       │   └── index.lazy.tsx
│       ├── further
│       │   ├── $caseId
│       │   │   └── index.tsx
│       │   └── index.lazy.tsx
│       ├── index.tsx
│       └── new-submission
│           ├── $caseId
│           │   └── index.tsx
│           └── index.lazy.tsx
├── _protected.tsx
└── _unprotected
    └── login
        ├── -schema
        │   └── index.tsx
        ├── -types
        │   ├── index.ts
        │   └── list-menu.ts
        └── index.tsx


Is there a specific way to achieve this nested 404 behavior? I'm assuming the notFoundComponent in _protected.tsx should override the root one for routes under that layout, but it's not working as expected. Any ideas on what I might be missing or how to correctly implement this?"
Was this page helpful?