TanStack Router (React)
基于文件系统的类型安全React路由库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：TanStack Router (React)。 它的用途是：基于文件系统的类型安全React路由库 详细介绍见：https://321skill.com/skills/tanstack-router-react/ 请根据该页面的说明完成安装。
使用示例
“我正在使用TanStack Router开发一个用户管理后台，需要创建一个显示用户详情页的路由，路径是`/users/:id`，并且要预加载用户数据。”，它会指导你创建`/app/routes/users/$id.tsx`文件，在其中定义路由组件和`loader`函数，并展示如何通过生成的类型安全钩子（如`useParams`）来获取`id`参数和加载的数据。
介绍
TanStack Router是一个专为React应用设计的现代化、类型安全的客户端路由库。它解决了在复杂React应用中管理路由状态、类型安全和代码组织混乱的痛点。
该库采用基于文件系统的路由定义方式，开发者只需在项目中创建特定的文件结构，即可自动生成类型安全的路由配置。它深度集成了TypeScript，提供了从URL参数、查询字符串到数据加载函数的端到端类型推断，极大减少了因路由拼写错误或类型不匹配导致的运行时错误。
它非常适合需要构建中大型、对类型安全和开发体验有较高要求的React应用的前端或全栈开发者。无论是开发管理后台、电商平台还是内容型网站，都能从中受益。
使用建议：对于新项目，可以优先考虑采用；对于已有项目，需要评估迁移成本。建议结合其官方文档中的示例和最佳实践来规划项目结构，以充分利用其类型安全和代码组织的优势。
核心特点
与React Router等库相比，其核心区别在于“基于文件系统的路由”和“极致的类型安全”。它通过文件路径自动生成路由，并利用TypeScript泛型实现了URL参数、查询参数、数据加载函数返回值等全链路的类型推断和约束，将许多路由错误从运行时提前到编译时。
注意事项
不适合对打包体积极其敏感或无需类型安全的小型简单项目。
常见问题
TanStack Router和React Router有什么区别？
主要区别在于路由定义方式（文件系统 vs 组件声明）和类型安全深度。TanStack Router通过文件路径生成路由，并提供端到端的TypeScript类型推断，而React Router更灵活但类型支持相对较弱。
它支持服务端渲染（SSR）吗？
支持。TanStack Router提供了与流行服务端渲染框架（如Remix、Next.js的App Router模式）集成的能力，可以处理数据预加载和 hydration。