SuperAPI AI 工具集

tanstack-router-best-practices

前端与建站

查看项目

更新于 10-15 20:35

技能介绍

用途:这是一套 TanStack Router 在 React 应用中的最佳实践规则集,用于优化类型安全、数据加载、导航与代码组织。适用场景包括搭建应用路由、创建路由与布局、处理搜索参数、配置数据加载器、代码分割、与 TanStack Query 集成,以及重构导航模式。

主要能力按优先级分组:关键级含类型安全(4 条,如注册路由类型、用 from 参数收窄类型、用 createRootRouteWithContext 标注路由上下文、在 loader 中用 queryOptions)与路由组织(5 条,如优先基于文件的路由、层级路由树、无路径布局、index 与布局路由、虚拟文件路由);高级含路由配置(1 条全局默认)、数据加载(6 条,如 route loader、loaderDeps 缓存控制、ensureQueryData、拆分关键与非关键数据、错误处理、并行加载)、搜索参数(5 条,始终校验、继承父级类型、中间件、默认值、自定义序列化器)、错误处理(1 条 404);中级含导航(5 条,如 Link 组件、激活状态、useNavigate、相对路径、路由遮罩)、代码分割(3 条,如 .lazy.tsx、关键配置留在主路由文件、autoCodeSplitting)、预加载(3 条,如基于意图的预加载、预加载过期时间、手动预加载);低级为路由上下文(3 条,根路由定义上下文、beforeLoad 扩展、依赖注入)。

使用方式:每条规则位于 rules/ 目录下的独立文件,含解释、反例、正例与适用上下文;按前缀选用(ts-、router-、org-、load-、search-、err-、nav-、split-、preload-、ctx-)。

限制:资料未提供具体安装命令、版本要求、代码示例细节与定价信息,暂未提供。