TanStack•13mo 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

__root.tsx

layout and a

_protected.tsx

_protected.tsx

layout.

My goal is to have a specific 404 page rendered when a route under the

_protected

_protected

layout is not found, without falling back to the 404 defined in

__root.tsx

__root.tsx

.

Currently, I've tried defining a

notFoundComponent

notFoundComponent

within

_protected.tsx

_protected.tsx

. However, when I navigate to a non-existent route within the

_protected

_protected

layout, it always renders the notFoundComponent defined in

__root.tsx

__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

notFoundComponent

_protected.tsx

_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?"

TanStack•13mo 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

__root.tsx

layout and a

_protected.tsx

_protected.tsx

layout.

My goal is to have a specific 404 page rendered when a route under the

_protected

_protected

layout is not found, without falling back to the 404 defined in

__root.tsx

__root.tsx

.

Currently, I've tried defining a

notFoundComponent

notFoundComponent

within

_protected.tsx

_protected.tsx

. However, when I navigate to a non-existent route within the

_protected

_protected

layout, it always renders the notFoundComponent defined in

__root.tsx

__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

notFoundComponent

_protected.tsx

_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?"

How to nested a 404 and 500 page?

Similar Threads

How to nested a 404 and 500 page?

Similar Threads

Similar Threads

Similar Threads