用途:TanStack Router 是面向 React 的完全类型安全、基于文件的路由器,用于构建客户端优先的单页应用(SPA),可选支持 SSR。
主要能力:基于文件的路由与命名约定(如 __root.tsx、index.tsx、posts.$postId.tsx、_auth.tsx 无路径布局、files.$.tsx splat、posts.{-$category}.tsx 可选路径参数等);类型安全的 search params 校验(适配 Zod、Valibot、ArkType),支持 retainSearchParams、stripSearchParams 等搜索中间件;内置数据加载与 SWR 缓存,通过 loader、loaderDeps、staleTime、shouldReload、pendingMs、gcTime 等选项控制;自动代码分割;类型推断导航(Link、useNavigate);路由上下文依赖注入(createRootRouteWithContext);认证与受保护路由(beforeLoad 中 redirect);错误处理(notFound、errorComponent、defaultNotFoundComponent);以及 useSearch、useParams、useLoaderData、useRouterState、useBlocker 等 hooks。
使用方式:安装 npm install @tanstack/react-router 与 npm install -D @tanstack/router-plugin,可选 devtools。在 Vite 配置中启用 tanstackRouter({ target: 'react', autoCodeSplitting: true }),注意 tanstackRouter() 必须排在 react() 之前。路由文件放在 src/routes/,导出 const Route = createFileRoute(...),插件自动生成 routeTree.gen.ts(需提交但不可手改),并在 main.tsx 中创建 router 与 RouterProvider,同时通过 declare module 注册全局类型。
适用场景:需要强类型路由、复杂搜索参数、内置数据加载与代码分割的 React SPA 项目,以及需要认证、SSR、i18n 或路由测试的场景。
限制:资料未提供具体收费与价格信息;支持 React,Vite 为推荐方式,其他打包器配置见参考资料;各 API 与配置细节需参考其 references 目录文档。