解决react-router-dom没有支持name命名使用的问题

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/:id vs /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对话整理而来。