React Router v6是否有替代v5动态路径正则匹配的方案？

React Router v6移除了v5中直接在路径字符串里用正则约束动态参数的语法，不过可以通过以下几种方式实现相同效果：

1. 定义多个明确路由 #

直接为每个允许的值配置独立路由，逻辑直观且易维护：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/some-path/value1" element={<YourComponent />} />
      <Route path="/some-path/value2" element={<YourComponent />} />
      <Route path="/some-path/value3" element={<YourComponent />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

如果多个路由共用同一个组件，可提前提取组件避免重复代码。

2. 路径参数+组件内校验 #

先定义带参数的路由，再在组件内部校验参数是否在允许范围内，不符合则跳转到404：

// 路由配置
<Routes>
  <Route path="/some-path/:someDynamicProperty" element={<YourComponent />} />
  <Route path="*" element={<NotFound />} />
</Routes>

// 组件逻辑
import { useParams, Navigate } from 'react-router-dom';

function YourComponent() {
  const { someDynamicProperty } = useParams();
  const allowedValues = ['value1', 'value2', 'value3'];

  // 参数不在允许列表中时重定向到404
  if (!allowedValues.includes(someDynamicProperty)) {
    return <Navigate to="*" replace />;
  }

  return <div>当前值：{someDynamicProperty}</div>;
}

3. 结合matchPath自定义匹配逻辑 #

通过matchPath工具函数手动校验路径参数，适合复杂路由场景：

import { useRoutes, matchPath } from 'react-router-dom';

function App() {
  const allowedValues = ['value1', 'value2', 'value3'];
  
  const routes = useRoutes([
    {
      path: '/some-path/:someDynamicProperty',
      element: (() => {
        const match = matchPath(
          '/some-path/:someDynamicProperty',
          window.location.pathname
        );
        const param = match?.params.someDynamicProperty;
        
        return param && allowedValues.includes(param) 
          ? <YourComponent /> 
          : <NotFound />;
      })()
    },
    { path: '*', element: <NotFound /> }
  ]);

  return routes;
}

React Router v6做此调整是为了简化路径匹配逻辑，让路由规则更清晰，避免正则带来的复杂度。

内容的提问来源于stack exchange，提问作者Vitaliy Martiniuk