react-router-data-mode

此技能為 AI 代理提供開發 React Router 資料 API 的專家級指導，適用於現有的 React 應用程式。其專為使用「資料模式」的開發者設計，透過 loader、action 與瀏覽器路由來管理狀態、資料變更與導航流程，而無需依賴完整的 React Router 框架插件。透過此技能，代理能夠準確執行現代化的路由模式，提升應用效能與使用者體驗。

該技能涵蓋了超越簡單宣告式路由所需的核心架構，實現了諸如預先載入資料、透過 action 處理表單提交、以及管理待處理 UI 狀態等進階功能。它為希望在僅客戶端或混合環境中採用穩健資料導向模式的開發者提供了橋樑。文件強調關注點分離，指導使用者採用更簡潔的資料模式，而非過時的 useEffect 資料獲取或手動狀態管理。

• 使用 route 物件 API 設定複雜的路由結構，滿足巢狀佈局與分段資料需求。

• 實作 loader 以預先載入資料依賴，確保元件掛載前資料已準備就緒。

• 透過 action 管理變更與表單提交，確保應用程式內狀態的持續重新驗證。

• 利用 useFetcher 執行背景變更、處理內聯資料更新，並避免不必要的全頁導航。

• 使用 useNavigation 與 useFetcher.formData 開發具備回應性的待處理/載入狀態，在非同步操作期間提供即時回饋。

• 採用樂觀 UI 模式 (Optimistic UI)，透過在伺服器回應前更新介面，使應用程式操作感覺更即時。

• 優先使用 Form 元件與 useFetcher，而非手動處理 onSubmit 事件，以發揮瀏覽器與函式庫的自動化優勢。

• 始終使用物件格式設定路由，而非 JSX 元件，以維持對資料 API 的相容性。

• 利用參考表格，將複雜需求（如 URL 參數處理或伺服器端渲染）快速對應至特定實作模組。

• 請記住 action 會自動觸發所有啟用 loader 的全域重新驗證，簡化跨 UI 的狀態同步。

• 確保表單方法 (method) 明確定義（如 method="post" 或 method="get"），以便 React Router 正確處理資料傳輸與導航生命週期。