用途:TanStack Router 是面向 React 的完全类型安全路由器,提供一流的基于文件的路由、搜索参数校验、loader 与内置缓存,适合构建需要强类型路由的 React 应用。
主要能力:具备文件式路由与嵌套、搜索参数校验、loader 数据加载、内置缓存,以及 Link、useNavigate 等类型化 API。
必要用法与要点:写代码前必须用 WebFetch 读取实时文档 https://tanstack.com/router/latest/docs/framework/react/overview,不要假设 API 存在,需对照当前文档核实。在入口文件做 Register 接口增强(interface Register { router: typeof router })以注册路由实例,否则跨模块的 Link、useNavigate 等钩子退化为宽松类型。搜索参数必须通过 validateSearch 显式校验,原始 URL 字符串不会直接传给组件,需在路由上定义 Zod、Valibot 等 schema,否则参数不可用或运行时抛错。loader 中使用的搜索参数需声明 loaderDeps,因为 loader 无法直接访问搜索参数,遗漏会导致缓存键忽略参数变化,产生难以追踪的静默陈旧数据问题。文件式嵌套用 . 而非文件夹,例如 blog.post.tsx 表示 post 是 blog 的子路由;两种 _ 约定效果相反:前缀 _(如 _layout.tsx)创建不增加 URL 段的无路径布局包裹子路由,路径段后缀 (如 blog.tsx)则让该分支脱离父布局包裹但保留 URL 嵌套。router.invalidate() 是粗粒度的,会一次性重新加载所有活动路由;若需要变更后按查询粒度失效,应搭配 TanStack Query。需运行 tsr generate 或使用 Vite 插件保持路由树同步,否则 routeTree.gen.ts 过期,Link、useNavigate 等类型化 API 会静默退化为 any,破坏类型安全且无明显错误。notFound() 与 redirect() 必须从 loader 中抛出而非返回,它们是路由器捕获的哨兵值,返回会导致 loader 看似成功却带回意外值,产生难以追踪的运行时缺陷。
适用场景:需要类型安全路由、文件式路由组织、搜索参数校验与数据预加载的 React 项目。
限制:资料未提供版本兼容范围、安装命令、收费与价格、平台支持及性能数据,这些内容暂未提供;同时强调训练数据不可靠,API 随版本变化,必须以最新官方文档为准。