03. Router：类型安全不是装饰

TanStack Router 的“强”不只是文件路由，而是整个 route tree 被 TypeScript 认识。

route tree 心智模型

Next.js 的文件系统本身就是框架入口；TanStack Router 的文件路由会生成 route tree，但你仍然显式创建 router、传 context、挂 provider。文件只是生成配置的方式，不是上帝。

// main.tsx
const router = createRouter({
  routeTree,
  context: { queryClient },
})

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />
)

文件路由示例

// src/routes/posts.$postId.tsx
export const Route = createFileRoute('/posts/$postId')({
  loader: ({ params }) => fetchPost(params.postId),
  component: PostPage,
})

function PostPage() {
  const post = Route.useLoaderData()
  return <article>{post.title}</article>
}

类型安全导航

TanStack 的 Link 知道哪些 route 存在、需要哪些 params/search。路径拼错不是运行时 404，而是编译期噪音。编译器偶尔像一个烦人的同事，但这次它是对的。

<Link to="/posts/$postId" params={{ postId: post.id }}>
  Open
</Link>

// 如果漏掉 postId，或者写成 /post/$id，TypeScript 应该抱怨。

布局与 pathless routes

TanStack 支持 nested routes、layout routes 和 pathless layouts。和 Next 的 layout.tsx 类似，但 route context、beforeLoad、loader 都可以参与父子继承。