genetic-orange

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

.
├── __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?"

3 Replies

rival-black•7mo ago

Hi I am interested on your post. I can help you. thanks.

genetic-orangeOP•7mo ago

so? how?

optimistic-gold•7mo ago

probably spam can you create a minimal complete example by forking one of the existing examples on Stackblitz? then it's much easier to experiment

Gaming

Programming

How to nested a 404 and 500 page?

Did you find this page helpful?