如何在React路由中配置多动态路径段指向同一组件？

正确路由配置方式 #

react-router-dom v6已废弃v5中的+参数语法，要匹配任意层级的嵌套路径（如/area/folder1/folder2/folder3），需使用通配符参数，有两种常用写法：

1. 直接匹配/area/下所有子路径

<Route path="/area/*" element={<AreaComponent />} />

2. 捕获路径段为参数（方便后续直接使用）

<Route path="/area/:folders*" element={<AreaComponent />} />

在组件中处理路径数据 #

无论用哪种路由写法，都能在AreaComponent中获取路径信息，用于生成面包屑、请求对应文件夹数据：

方式1：通过useParams()获取捕获的路径参数（对应第二种路由写法）

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

function AreaComponent() {
  const { folders } = useParams();
  // 将路径字符串分割为单个文件夹名称数组
  const folderSegments = folders ? folders.split('/') : [];
  // 获取最后一段路径（用于请求服务器数据）
  const targetFolder = folderSegments.at(-1) || '根文件夹';
  // 生成面包屑数据（包含每个文件夹的名称和跳转路径）
  const breadcrumbs = folderSegments.reduce((acc, segment, index) => {
    const parentPath = acc[index - 1]?.path || '/area';
    const currentPath = `${parentPath}/${segment}`;
    acc.push({ name: segment, path: currentPath });
    return acc;
  }, []);

  // 这里可以根据targetFolder请求对应文件夹的文件数据
  // ...

  return (
    <div>
      {/* 面包屑导航 */}
      <div className="breadcrumbs">
        <a href="/area">根文件夹</a>
        {breadcrumbs.map((crumb, idx) => (
          <span key={idx}>
            / <a href={crumb.path}>{crumb.name}</a>
          </span>
        ))}
      </div>
      {/* 文件夹内容展示 */}
      <h3>{targetFolder}的内容</h3>
      {/* ... 文件列表/上传组件等 */}
    </div>
  );
}

方式2：通过useLocation()解析路径（对应第一种路由写法）

如果不需要捕获参数，直接用useLocation()获取完整路径后解析：

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

function AreaComponent() {
  const { pathname } = useLocation();
  // 截取/area/之后的部分并分割为文件夹数组
  const folderSegments = pathname.replace(/^\/area\//, '').split('/').filter(Boolean);
  // 后续逻辑和方式1完全一致
  // ...
}

注意事项 #

• 路由顺序：通配符路由要放在更具体的路由之后（比如/area/upload这类明确路径的路由要写在/area/*前面），避免覆盖其他路由规则。
• 根路径处理：当访问/area时，folderSegments为空数组，逻辑会自动识别为根文件夹，无需额外判断。

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