tanstack-router

此技能为现代 React 应用中的 TanStack Router 提供全面的自动化与模式实现。它专为希望使用基于文件的系统标准化路由架构并优先考虑类型安全与性能的前端工程师而设计。通过利用 TanStack Router 插件，此技能可协助开发者生成路由树、实现布局层级，并在不牺牲包体积或开发体验的前提下处理复杂的导航需求。

该技能最适合用于初始化新项目、将遗留路由系统重构为现代标准，或扩展具有深层路由嵌套的大型应用。它简化了动态参数的实现、使用 Zod 进行搜索参数验证，以及高效的代码分割策略。用户可以自动化生成路由文件、配置 Vite 插件，并建立能有效管理全局状态或 Provider 的健壮根布局。

• 通过 TanStackRouterVite 插件配置实现自动路由树生成。

• 支持基于文件的路由结构，包括 __root.tsx、index.tsx 以及如 $userId 等动态路由段。

• 实现用于懒加载组件的虚拟文件路由，以提升感知性能与包优化。

• 集成 Zod 模式验证的类型安全搜索参数处理，提高导航过程中的数据完整性。

• 利用 Outlet 和开发工具进行根布局配置，简化开发环境中的调试工作。

• 自动化代码分割配置，区分关键路由逻辑与非关键的懒加载组件。

• 在使用标准 @tanstack/react-router 依赖项初始化新项目时使用此技能。

• 针对大型应用使用 autoCodeSplitting 功能，通过分离加载器、路由配置与 UI 组件来确保最优加载速度。

• 务必使用 createFileRoute 或 createLazyFileRoute 工厂函数定义路由，以维持内部类型推断。

• 在 validateSearch 属性内集成 Zod 模式，确保所有传入的 URL 搜索参数均经过严格类型检查和清理。

• 确保 routeTree.gen.ts 文件由 Vite 插件维护；手动创建文件时应遵循标准路径约定，以防止路由树不匹配。