如何用TanStack Router配置文件式嵌套路由实现年/月/日路径

问题出在当前文件命名方式导致路由匹配顺序错误，$year.tsx的路由路径/:year会优先匹配所有以年份开头的路径，覆盖了更具体的子路由。以下是两种可行的解决方案：

方案一：使用文件夹嵌套（推荐） #

这是TanStack Router文件式路由的标准层级结构，自动保证路由匹配的优先级（更具体的路由优先匹配）：

1. 创建如下文件夹结构：

routes/
├─ $year/
│  ├─ route.tsx          # 对应 /{year}
│  └─ $month/
│     ├─ route.tsx        # 对应 /{year}/{month}
│     └─ $day/
│        └─ route.tsx     # 对应 /{year}/{month}/{day}

2. 每个route.tsx的内容示例：

• $year/route.tsx：

import { createFileRoute } from '@tanstack/react-router'
import YearViewComponent from '../../components/YearViewComponent'

export const Route = createFileRoute('/$year')({
  component: YearViewComponent,
})

• $year/$month/route.tsx：

import { createFileRoute } from '@tanstack/react-router'
import MonthViewComponent from '../../../components/MonthViewComponent'

export const Route = createFileRoute('/$year/$month')({
  component: MonthViewComponent,
})

• $year/$month/$day/route.tsx：

import { createFileRoute } from '@tanstack/react-router'
import DayViewComponent from '../../../../components/DayViewComponent'

export const Route = createFileRoute('/$year/$month/$day')({
  component: DayViewComponent,
})

方案二：手动指定路由顺序 #

如果坚持使用点分隔的文件名，需要在根路由中手动调整路由注册顺序，让更具体的路由排在前面：

1. 保留三个文件：$year.tsx、$year.$month.tsx、$year.$month.$day.tsx

2. 在根路由文件（如routes/route.tsx）中，按从具体到抽象的顺序导入并注册路由：

import { createFileRoute } from '@tanstack/react-router'
// 先导入最具体的路由
import { Route as YearMonthDayRoute } from './$year.$month.$day'
import { Route as YearMonthRoute } from './$year.$month'
// 最后导入最抽象的路由
import { Route as YearRoute } from './$year'

export const Route = createFileRoute('/')({
  children: [
    YearMonthDayRoute,
    YearMonthRoute,
    YearRoute,
  ],
})

这样TanStack Router会优先匹配更具体的路由路径，避免$year.tsx覆盖子路由的情况。

内容的提问来源于stack exchange，提问作者Craig Smitham