React Router动态路径匹配及重复路由代码精简方案咨询

一、让第一条路径不匹配时才匹配第二条 #

要实现这个需求，核心是先限制第一条动态路径的参数取值范围，避免它“抢占”第二条路径的匹配机会，再利用React Router从上到下的顺序匹配特性（匹配到符合规则的路由就停止，否则继续向下匹配）。

方案1：路径参数正则约束（React Router v6.4+） #

直接在path中通过正则限定参数的可选值，第一条路由只会匹配符合规则的路径，剩余路径自动匹配第二条：

<Route 
  path="/:object(womens|mens|girls|boys)/:category(clothes|shoes)" 
  element={
    <Suspense fallback="Loading ...">
      <CatalogPage />
    </Suspense>
  } 
/>
<Route 
  path="/:some/:thing" 
  element={/* 第二条路径对应的组件 */} 
/>

方案2：组件内参数校验（兼容旧版本） #

如果你的React Router版本不支持路径正则，可以在第一条路由的组件内校验参数合法性，不合法则抛出404，触发后续路由匹配：

import { useParams } from 'react-router-dom';

function ValidatedCatalogPage() {
  const { object, category } = useParams();
  const validObjects = ['womens', 'mens', 'girls', 'boys'];
  const validCategories = ['clothes', 'shoes'];
  
  // 参数不符合规则时抛出404，让路由继续匹配下一条
  if (!validObjects.includes(object) || !validCategories.includes(category)) {
    throw new Response(null, { status: 404 });
  }
  
  return <CatalogPage />;
}

// 路由配置
<Route 
  path="/:object/:category" 
  element={
    <Suspense fallback="Loading ...">
      <ValidatedCatalogPage />
    </Suspense>
  } 
/>
<Route 
  path="/:some/:thing" 
  element={/* 第二条路径对应的组件 */} 
/>

二、简化重复的Route代码 #

有两种简洁写法，可根据需求选择：

方式1：合并为单一路由（推荐） #

用路径正则把四个前缀合并，一个路由覆盖所有匹配场景：

<Route
  path="/:gender(womens|mens|girls|boys)/:category"
  element={
    <Suspense fallback="Loading ...">
      <CatalogPage />
    </Suspense>
  }
/>

方式2：循环生成路由（适合动态扩展） #

把前缀存入数组，通过循环批量生成路由，后续添加新前缀只需修改数组：

const categoryPrefixes = ['womens', 'mens', 'girls', 'boys'];

{categoryPrefixes.map(prefix => (
  <Route
    key={prefix}
    path={`/${prefix}/:category`}
    element={
      <Suspense fallback="Loading ...">
        <CatalogPage />
      </Suspense>
    }
  />
))}

内容的提问来源于stack exchange，提问作者En Kratia