用途:在 Vite + React + TypeScript 的 SPA 中配置或扩展 TanStack Router(@tanstack/react-router v1),建立类型安全的路由层。不适用于 react-router/Remix 项目,也不涵盖 TanStack Start 的服务端渲染与流式能力。
主要能力:以路由树作为类型来源,注册后 Link、navigate、useParams、useSearch、useLoaderData 都按真实路由做编译期校验;支持受 schema 校验的 search 参数、渲染前取数的 route loader 与预加载、代码分割;提供 loader 与 TanStack Query 的衔接方式(loader 中 ensureQueryData,组件中 useSuspenseQuery)及基于内存 history 的路由组件测试脚手架。
使用方式:安装 @tanstack/react-router,开发依赖安装 @tanstack/router-plugin 与 @tanstack/react-router-devtools;在 vite.config.ts 中引入 tanstackRouter(须在 @vitejs/plugin-react 之前),插件监听 src/routes/ 并生成 src/routeTree.gen.ts;用 createRouter 传入 routeTree 并通过 declare module 做 Register 声明合并;Preferences: prefers file-based routing over code-based; prefers <Link> over useNavigate; set defaultPreload: 'intent'; keep the loader in the initial bundle.
限制:路由守卫应放在 beforeLoad/loader 而非组件;loader 依赖 search 时须声明 loaderDeps;搜索参数须经 validateSearch 校验;共享组件中的类型化 hook 应传 from 或用 getRouteApi;Zod v3 需用 @tanstack/zod-adapter 的 zodValidator,v4 可直接传 schema,旧包 @tanstack/router-zod-adapter 已弃用。价格、平台与效果等资料暂未提供。