React Router实现文件浏览器多级动态路由的方案咨询

兄弟，你这种手动写多层路由的做法确实太折腾了，不仅代码冗余还限制了文件夹的嵌套深度，完全没必要这么搞！React Router早就提供了专门处理这种动态多级路径的方案，轻松解决你的问题。

核心解决方案：使用剩余参数路由（Rest Parameter Routes） #

不管你用的是React Router v6+（现在主流版本），都可以通过通配符*来匹配任意层级的后续路径，彻底摆脱深度限制：

1. 路由配置

只需要写一条路由规则就够了，完全覆盖所有嵌套层级：

{
  // 匹配 /explorer 以及所有 /explorer/xxx/xxx/... 格式的路径
  path: 'explorer/*',
  element: <Explorer />,
}

或者如果你想把整个层级路径作为一个参数直接获取，可以写成：

{
  path: 'explorer/:folderHierarchy*',
  element: <Explorer />,
}

2. 在组件中获取层级路径

在<Explorer>组件里，用useParams()钩子就能拿到完整的文件夹层级：

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

function Explorer() {
  const { folderHierarchy } = useParams();
  // 这里的folderHierarchy会是一个数组，比如访问/explorer/folder1/folder2/folder3时，它就是['folder1', 'folder2', 'folder3']
  // 处理一下边界情况，确保是数组格式
  const folderPath = Array.isArray(folderHierarchy) ? folderHierarchy : [];

  // 接下来你就可以用这个数组去定位对应的文件夹了，比如遍历加载对应层级的内容
  console.log('当前文件夹路径:', folderPath.join('/'));

  return (
    // 你的文件浏览器UI
  );
}

3. 生成跳转链接

如果需要从当前文件夹跳转到子文件夹，用Link组件或者useNavigate钩子都很方便：

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

// 假设当前层级是['folder1', 'folder2']，要进入子文件夹folder3
<Link to={`/explorer/${['folder1', 'folder2', 'folder3'].join('/')}`}>
  进入folder3
</Link>

补充说明 #

如果你还在使用React Router v5，写法略有不同，用/:folderHierarchy+来匹配非空的多级路径，但现在大部分项目都已经升级到v6了，优先推荐上面的v6方案。

这种方式既简洁又灵活，完全替代了你之前那种hacky的手动路由写法，不管用户嵌套多少层文件夹都能完美适配，彻底解决你的痛点！

备注：内容来源于stack exchange，提问作者Tom el Safadi