本技能用于为 TanStack Router 应用(Vite SPA,或 TanStack Start 的路由层)提供统一约定。仅当应用使用 TanStack Start(SSR、server functions、API routes)时,才需配合 tanstack-start-conventions 使用。
适用场景:搭建 @tanstack/react-router + Vite 的 SPA;新增或修改 UI 路由、loader、validateSearch;配置 router.tsx(parseSearch、stringifySearch、尾斜杠);处理地图视口参数 ?map=zoom/lat/lng 的解析、序列化与校验;loader 与 React Query 的客户端集成;客户端变更(useMutation 与 Form onSubmit 的取舍,如删除、撤销、导入、一次性按钮);类型化的 Link、useParams/useSearch、getRouteApi;安装 TanStack devtools 调试面板。
不涉及:createServerFn、.server.ts/.functions.ts、选择性 SSR、RSC、API server.handlers,这些属于 tanstack-start-conventions。
必守规则:路径参数与 UI 搜索使用 Zod 4 校验,复用的搜索 schema 需导出,类型用 Route.useSearch(),不做手工类型断言。router.tsx 中配置 parseSearch 与 stringifySearch(默认美观 JSON),trailingSlash 设为 'never' 并做根路径尾斜杠重定向,按参数分别采用紧凑/JSON 编码,仅在大型对象时用 jsurl。地图参数通过共享的 parseMapParam/serializeMapParam 处理,序列化时四舍五入,不对值做 encodeURIComponent,且不把 map 放进 loaderDeps。jsurl 仅用于大型嵌套路由参数,需登记在 jsurlSearchKeys 与搜索注册表中,复用 jsurlParse/jurlStringify。查询驱动的 UI 由 loader 预热缓存,组件用 useQuery/useSuspenseQuery,而非只依赖 useLoaderData。调试面板使用 components/shared/devtools/ 下的 TanStackAppDevtools 内联面板,生产环境通过 @tanstack/devtools-vite 剥离。
快速决策:共享、可失效、多路由数据用 *QueryOptions + loader 中 ensureQueryData + UI 中 useSuspenseQuery;一次性页面数据用 loader 返回值 + useLoaderData。多查询合并优先服务端/API 层 join,客户端默认在包装 hook 中组合。搜索写入对过滤/开关优先 replace: true,用 key 设 undefined 清除,使用路由内 updateSearch 包装。非表单操作(删除、撤销、导入、一次性按钮)用 useMutation;表单提交用 TanStack Form onSubmit,不包 useMutation,删除不用 useTransition。
相关技能:tanstack-start-conventions、tanstack-start-auth、zustand-state-management、nuqs(仅 Next.js/旧项目)、react-dev、react-map-gl。部分实现细节(如具体收费、价格、平台支持范围)暂未提供。