Dynamic nested routes using TanStack Router

Question

How would I set up file-based routing with tanstack router so that I could have these three different routes:

/{year} routes to YearViewComponent
/{year}/{month} routes to MonthViewComponent
/{year}/{month}/{day} routes to DayViewComponent

I've tried to accomplish the above by defining three file-based routes:

$year.$month.$day.tsx
$year.$month.tsx
$year.tsx

However, the $year.tsx component is picking up all routes, instead of allowing $year.$month to handle /2025/12 for example. How can I get $year.$month.tsx to handle /2024/12 route and $year.$month.$day to handle /2024/12/24 route?

user29602280 · Accepted Answer · 2025-02-11 17:24:13Z

0

The router is treating each of those as layouts rather than individual routes/files. If you don't want them to affect each other, you need to add ".index":

$year.$month.$day.index.tsx
$year.$month.index.tsx
$year.index.tsx

This will then treat each file as its own distinct route.

answered Feb 11 at 17:24

user29602280

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic nested routes using TanStack Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related