1. 前言
react-router-dom 并不能像 vue 的route 那樣給每個路由命名 name ，導致代碼不能解耦路由路徑與導航邏輯。
2. react-router 為什么沒有支持？
很早之前官方 issue 中就有過很多討論：
翻譯過來，就是由于以下幾個重要原因，所有在 1.0 版中刪除了它：
- 動態加載路由配置（例如 getChildRoutes）意味著我們可能無法為路由配置尚未加載的
<Link>構建真實的 URL。 - 認為在
<Link to>中使用真實的 URL 路徑不會花費額外的時間，您只需查找路由路徑或名稱，它們通常彼此對應。 - 現在您無需知道參數名稱即可創建鏈接。
- 希望鼓勵用戶不要更改 URL，而是使用
<Redirect>代替。
鑒于上述原因，將 <Route name> 作為我們為所有人提供的 API 重新引入似乎并不值得。但是，一些用戶認為 <Route name> 仍然可以用來指定可在開發過程中使用的路由名稱。
3. 命名路由（Named Routes）的優勢
3.1 解耦路由路徑與導航邏輯
- 問題：直接使用路徑字符串（如
to="/user/123"）會導致代碼與 URL 結構強耦合，一旦路徑變更（如/user/:id→/profile/:id），所有相關代碼都需修改。 - 命名路由優勢：通過名稱（如
name="user"）引用路由，路徑變更時只需更新路由配置，導航代碼無需修改。
3.2 簡化復雜路徑的引用
- 長路徑問題：多層嵌套的路徑（如
/admin/dashboard/settings/profile）直接硬編碼會降低可讀性。 - 命名路由優勢：通過名稱（如
name="admin-profile"）簡化引用，代碼更清晰。
3.3 動態路徑參數的類型安全
- 問題：直接拼接路徑參數（如
to="/user/" + userId）容易因參數缺失導致錯誤。 - 命名路由優勢：強制要求傳遞所有必要的
params，減少運行時錯誤。
3.4 跨模塊路由復用
- 大型應用場景：不同模塊可能需要跳轉到同一頁面，但路徑結構可能不同（如
/:lang/user/:idvs/user/:id）。 - 命名路由優勢：通過統一名稱（如
name="user"）在不同模塊間復用路由，無需關心具體路徑。
3.5 提高代碼可讀性
- 語義化命名：名稱（如
name="login"）比路徑（如/auth/sign-in）更直觀，尤其在多人協作的項目中。 - IDE 支持：IDE 可通過名稱快速定位路由定義，提高開發效率。
4. 解決方案
命名路由的核心價值在于 解耦導航邏輯與 URL 結構，使代碼更易于維護和擴展。在大型應用或路徑頻繁變更的場景下，Vue Router 的命名路由提供了顯著優勢，而 React Router 則通過聲明式路徑匹配保持了更直接的 URL 與組件關系。
4.1 使用自定義常量管理路徑（推薦）
// routes.js
const PRODUCTS = '/products'
export const PATHS = {HOME: '/',PRODUCTS,PRODUCT_DETAIL: `${PRODUCTS}/:id`,
};// App.js
import { PATHS } from './routes';<Routes><Route path={PATHS.HOME} element={<Home />} /><Route path={PATHS.PRODUCTS} element={<Products />} />
</Routes>// 導航時
<Link to={PATHS.PRODUCTS} />
4.2 使用三方庫
如果確實需要命名路由，可以引入第三方庫，例如 react-router-named-routes
npm install react-router-named-routes
需要注意的是，三方庫對 react-router-dom 的要求。
注：文章部分內容是通過與AI對話整理而來。
