React Router Dom 6中如何匹配多段可选路由？有无更优方案？

针对你遇到的React Router v6移除可选路径参数（?）的问题，这里有几个更简洁的实现方案：

方案1：使用通配符捕获剩余路径 #

用*通配符匹配/:firstKey之后的所有路径，再手动解析后续参数，适合不需要严格限制层级的场景：

import { useMatch, useLocation, Navigate } from 'react-router-dom';

const MyComponent = () => {
  const match = useMatch('/:appId/:firstKey/*');
  
  if (!match) {
    return <Navigate to="/" replace />;
  }

  const { appId, firstKey } = match.params;
  // 解析通配符捕获的剩余路径，过滤空字符串
  const [secondKey, thirdKey] = match.params['*'].split('/').filter(Boolean);

  // 后续业务逻辑
  return <div>...</div>;
};

优点：代码最简洁，一次匹配所有层级；缺点：无法严格限制只能有1-2个后续参数，若需要精确限制层级则不适用。

方案2：嵌套路由拆分公共部分 #

把公共路径/:appId/:firstKey作为父路由，子路由处理不同层级的扩展，利用useMatches合并所有匹配的参数：

路由配置： #

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

function App() {
  return (
    <Routes>
      <Route path="/:appId/:firstKey" element={<MyComponent />}>
        <Route path=":secondKey" element={<></>} />
        <Route path=":secondKey/:thirdKey" element={<></>} />
      </Route>
      {/* 其他路由配置 */}
    </Routes>
  );
}

组件内获取参数： #

import { useMatches, Navigate } from 'react-router-dom';

const MyComponent = () => {
  const matches = useMatches();
  // 合并所有匹配路由的参数
  const combinedParams = matches.reduce((params, match) => ({
    ...params,
    ...match.params
  }), {});

  if (!combinedParams.appId || !combinedParams.firstKey) {
    return <Navigate to="/" replace />;
  }

  const { appId, firstKey, secondKey, thirdKey } = combinedParams;

  // 后续业务逻辑
  return <div>...</div>;
};

优点：严格匹配层级，符合React Router v6的路由设计理念；缺点：需要调整路由结构，适合原本就有嵌套组件需求的场景。

方案3：使用正则表达式路由（v6.4+） #

React Router v6.4及以上版本支持在路径中使用正则表达式，可以模拟原有的可选参数逻辑：

import { useMatch, Navigate } from 'react-router-dom';

const MyComponent = () => {
  // 用正则精确匹配1-3级参数的场景
  const match = useMatch('/:appId/:firstKey(/:secondKey)?(/:thirdKey)?');
  
  if (!match) {
    return <Navigate to="/" replace />;
  }

  const { appId, firstKey, secondKey, thirdKey } = match.params;

  // 后续业务逻辑
  return <div>...</div>;
};

优点：严格匹配指定层级，语法接近原有的可选参数写法；缺点：需要依赖React Router v6.4及以上版本。

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