Router、RouterProvider 和 useRouters

導言 - Lead paragraph

useRouters 和 RouterProvider + Router 都是 React Router V6 庫中用於處理路由的方式，但它們適用於不同的場景和需求。

表格直觀比較 =>

特點	useRoutes	RouterProvider + Router
主要庫	react-router-dom	react-router-dom
使用方式	需要在每個組件中使用 useRouters	在應用程式最上層使用 RouterProvider，在各組件中使用 Router
適用於	單一組件中的簡單路由	應用中複雜路由需求、多組件的場景
適用於小型應用	是	是
適用於大型應用	可能不夠靈活，根據需求而定	是
程式碼結構	路由邏輯與UI高度解耦	路由邏輯可能與UI有些耦合
路由配置	在組件中進行單獨設定	在 Router 中集中管理設定
模組化配置	通常配置與組件在同一文件中	可以拆分路由配置，更模組化
子元件存取路由資訊	需要在每個子組件中使用 useRouters	子組件能透過 Router 存取路由資訊
狀態管理	由各組件自行管理狀態	可透過 RouterProvider 管理共同狀態
嵌套(巢狀)路由	較複雜，需要手動處理	支援較方便的嵌套路由設定
動態路由參數	通常可以處理，但較簡單	更強大的處理動態參數能力
路由守衛和權限控制	較簡單	更容易實現路由守衛和權限控制
動畫和過渡效果	可以自定義，但需額外處理	可以更容易實現過渡效果和動畫
學習曲線	較低	較高
複雜性	適用於簡單路由需求	適用於複雜路由需求
應用	較適合小型專案或簡單應用	較適合複雜專案或需要共同路由狀態的情境

解耦 就是用數學方法將兩種運動分離開來處理問題。
耦合 是指兩個或兩個以上的體系或兩種運動形式間通過相互作用而彼此影響以至聯合起來的現象。
來源：百科知識中文網

useRoutes 是什麼？

useRoutes 是 React Router v6 中的一個輕量級工具，用於在函數式組件中定義路由配置。

這種方式更加靈活，適用於需要動態、基於狀態的路由配置，以及希望將路由配置集中在組件內部的情況。

useRoutes 優點

• 輕量級: useRoutes 是 react-router-dom 中的一個鉤子（hook），用於將路由配置與組件相關聯，使路由管理相對簡單。
• 更具可讀性: 將路由配置和路由匹配邏輯集中在一個組件中管理，使程式碼更清晰。
• 靈活性: 據組件內部狀態來動態生成路由配置。

不需要包裹整個應用在 RouterProvider 下，因此更適合小型項目或對路由配置的簡單需求。

useRoutes 缺點

• 有限的功能: useRoutes 提供的功能相對有限，可能無法滿足複雜路由需求。
• 不夠模組化: 在路由配置變得複雜時，可能導致代碼不夠模組化，難以維護。

複雜路由需求像是：巢狀路由結構、動態路由參數、路由守衛和權限控制、動畫和過渡效果、動態路由配置。

useRoutes 適用情況

1. 適用於小型應用或簡單的路由配置，特別是在路由配置相對固定的情況下。
2. 需要動態生成路由配置的場景，例如根據用戶角色動態生成路由。
3. 希望程式碼更集中，將路由配置直接放在組件中。

RouterProvider + Router

RouterProvider 與 Router 是 react-router-dom 中提供的組件，用於在應用中配置和管理路由。

這種方式更適合需要在一個地方集中式地配置所有路由的情況。

RouterProvider + Router 優點

• 強大的功能: 提供了更豐富的路由功能，包括路由配置、嵌套路由（又名巢狀路由）、路由守衛、重定向等。
• 模組化配置: 可將路由配置拆分為多個文件，使程式碼更加模組化，易於管理。

RouterProvider + Router 缺點

• 較為複雜: 對於某些複雜的路由配置需求，可能會顯得不夠靈活且繁瑣。
• 難以處理: 可能難以處理動態路由配置，特別是在某些情況下需要基於組件內部狀態來配置路由。

因為使用 RouterProvider + Router 需要更多的程式碼和配置。

RouterProvider + Router 適用情況

1. 適用於中大型應用，特別是在需要嵌套路由、佈局組件等複雜場景下。
2. 對於 React Router v5 的用戶，過渡到新版本時可能會更容易接受和適應。

複雜路由例如？

複雜路由需求 可以涵蓋許多不同情況：

• 巢狀路由結構: 如果應用需要有多層次的巢狀路由
  例如：在一個主要的頁面中有多個子頁面，每個子頁面又有自己的子頁面，那麼 RouterProvider + Router 的組織方式會更適合，這樣可以更好地管理這些層次關係。
• 動態路由參數: 如果需要在路由中傳遞動態參數
  例如：在 URL 中顯示不同的資源 ID 或名稱，則需要能夠處理這些參數的功能。RouterProvider + Router 提供了更靈活的方式來處理這種情況。
• 路由守衛和權限控制: 如果需要在訪問某些頁面之前執行一些操作
  例如：檢查用戶是否已登錄或是否具有訪問權限，那麼 RouterProvider + Router 提供了更多選項來實現路由守衛和權限控制。
• 動畫和過渡效果: 如果希望在路由之間添加過渡效果或動畫，RouterProvider + Router 可能會更容易實現這些功能。
• 動態路由配置: 如果路由結構需要根據某些條件或資料來動態生成，那麼使用 RouterProvider + Router 可能更靈活，可以根據需要動態配置路由。

複雜路由需求通常涉及到層次結構、動態參數、權限控制等情況，這些情況下使用 RouterProvider + Router 可以更好地滿足需求。

對於簡單的路由導航，使用 useRoutes 可能已經足夠。

結論 - Concluding

若應用較小且只有少數幾個地方需要路由功能，或更喜歡將路由邏輯與 UI 完全分離，那麼可使用 useRouter。

若傾向於現代的函數式組件風格，且項目的路由配置相對簡單，那麼 useRoutes 可能更適合。

若應用規模較大，需要在多個組件之間共享路由狀態，或希望在整個應用中使用一致的路由上下文，那麼可選擇 RouterProvider + Router。

若正在從 React Router v5 過渡到 v6，可能會更容易上手 RouterProvider + Router。

選擇使用哪種方式取決於項目需求和個人的開發偏好。

無論選擇哪種方式，重要的是保證路由配置能夠滿足項目的需求，並且能夠讓應用在不同頁面之間進行導航。

此僅為筆記，可能有錯