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对话整理而来。
