React Router中如何为单个路由配置多路径？避免代码重复

方案1：抽离公共路由配置对象 #

把重复的element、loader等配置抽成单独变量，通过扩展运算符复用，避免重复编写相同代码：

// 抽离公共路由配置
const questionsRoute = {
  element: <Questions />,
  loader: questionsLoader
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        index: true,
        ...questionsRoute
      },
      {
        path: 'search',
        ...questionsRoute
      },
      // 后续新增的同组件路由直接复用配置
      {
        path: 'tag/:tagId',
        ...questionsRoute
      }
    ]
  }
]);

这种方式保留独立路由条目，同时通过配置复用减少冗余，适合需要为不同路径保留独立语义的场景。

方案2：使用多路径匹配（React Router v6.4+） #

React Router v6.4及以上版本支持路由path属性接收字符串数组，单个路由即可匹配多个路径，彻底消除重复路由配置：

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        // 同时匹配根路径（空字符串）、/search、/tag/:tagId
        path: ['', 'search', 'tag/:tagId'],
        element: <Questions />,
        loader: questionsLoader
      }
    ]
  }
]);

关键说明： #

• 空字符串''对应父路由的默认子路由（替代原index: true的配置），无需额外设置index属性。
• 路径数组支持所有React Router路径规则，包括动态参数（如tag/:tagId）。
• questionsLoader中获取参数的逻辑完全通用：搜索参数用request.url.searchParams.get('q')，动态路径参数用params.tagId即可，无需针对不同路径修改。

方案3：通配符匹配规则性路径 #

如果需要匹配的路径有统一规则（比如所有以filter-开头的路径），可以使用通配符简化配置：

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: ['', 'search', 'filter-*'],
        element: <Questions />,
        loader: questionsLoader
      }
    ]
  }
]);

这种方式适合批量匹配同规则路径，减少手动添加路径的工作量。

内容的提问来源于stack exchange，提问作者Ioannis Potouridis