SuperAPI AI 工具集

tanstack-router

前端与建站

查看项目

更新于 10-16 09:47

技能介绍

用途:TanStack Router 为 React 提供类型安全、基于文件的路由方案,覆盖路由定义、数据加载、搜索参数校验、代码分割与导航控制。

主要能力:用 createFileRoute('/path') 定义文件式路由,createRootRouteWithContext<T>() 建立带类型上下文的根路由,createLazyFileRoute('/path') 做代码分割;zodValidator(schema) 校验搜索参数;组件侧通过 Route.useLoaderData()、Route.useParams()、Route.useSearch() 获取类型安全数据,useNavigate() 做编程式跳转,useBlocker() 拦截未保存表单的离开,notFound() 从 loader 抛 404,getRouteApi('/path') 在拆分文件中获得类型化钩子,stripSearchParams(defaults) 与 retainSearchParams(['key']) 管理 URL 参数。数据加载推荐在 loader 中使用 ensureQueryData(返回数据并抛错),prefetchQuery 用于后台预取,fetchQuery 用于即时数据,defer() 可流式返回非关键数据。预加载策略有 'intent'(悬停/聚焦,多数链接默认)、'render'、'viewport' 和 false。文件约定包括 __root.tsx、index.tsx、posts.$postId.tsx、_authenticated.tsx、dashboard.lazy.tsx。

使用方式:需注册路由类型(declare module 加 Register 接口),useParams() 必须传 from 以获得精确类型,普通链接用 <Link> 而非 useNavigate(),loader 中用 ensureQueryData 而不是 prefetchQuery,避免在 useEffect 中取数,用 Promise.all 并行请求,路径始终带前导斜杠,Vite 配置中 TanStackRouterVite 必须放在 react() 之前。

适用场景:React 应用的文件式路由、路由级数据预取、搜索参数类型化校验、代码分割与预加载、鉴权布局与上下文注入、导航拦截与滚动恢复。

限制:资料中未提供收费、价格与平台支持等信息;文档列出 20 个已知问题及修复,例如 strict: false 时参数不解析、无路径路由的 notFoundComponent 需定义在子路由、中止的 loader 需用 if (!error) return null 保护 errorComponent、未声明 loaderDeps 会导致重复运行等。相关主题如 Query 模式、TanStack Start、TanStack Table 与 devtools 调试建议交由对应技能处理。