tanstack-router

此技能為現代 React 應用程式中的 TanStack Router 提供全面的自動化與模式實作。專為希望使用優先考慮型別安全與效能的檔案系統路由來標準化路由架構的前端工程師所設計。透過利用 TanStack Router 外掛程式，此技能協助開發者產生路由樹、實作版面配置層級，並在不犧牲套件大小或開發體驗的前提下處理複雜的導航需求。

本技能最適合用於設定新專案、將舊有路由系統重構為現代標準，或擴展具有深層路由巢狀的大型應用程式。它簡化了動態參數的實作、使用 Zod 進行搜尋參數驗證，以及高效的程式碼分割策略。使用者可以自動化產生路由檔案、設定 Vite 外掛，並建立能有效管理全域狀態或供應器的強大根版面配置。

• 透過 TanStackRouterVite 外掛設定自動產生路由樹。

• 支援包含 __root.tsx、index.tsx 以及如 $userId 等動態路由片段的檔案系統路由結構。

• 實作虛擬檔案路由以處理延遲載入元件，從而提升感知效能與套件最佳化。

• 整合 Zod 架構驗證的型別安全搜尋參數處理，增強導航期間的資料完整性。

• 運用 Outlet 與開發工具進行根版面配置設定，以簡化開發環境中的偵錯流程。

• 自動化程式碼分割設定，以區分關鍵路由邏輯與非關鍵的延遲載入元件。

• 當使用標準 @tanstack/react-router 相依性初始化新專案時，請使用此技能。

• 針對大型應用程式套用 autoCodeSplitting 功能，透過分離載入器、路由設定與 UI 元件來確保最佳載入速度。

• 務必使用 createFileRoute 或 createLazyFileRoute 工廠函數來定義路由，以維持內部的型別推斷。

• 在 validateSearch 屬性內整合 Zod 架構，確保所有傳入的 URL 搜尋參數均經過嚴格型別化與清理。

• 確保 routeTree.gen.ts 檔案由 Vite 外掛維護；手動建立檔案時應遵循標準路徑慣例，以防止路由樹不匹配。