React Router 为文件资源管理器提供多个动态路由

Question

我有一个使用 React Router 的 React 应用程序。我有一个文件资源管理器，用户可以在文件夹中创建文件夹。我想创建一个 url，用户可以使用该 url 直接跳转到该文件夹内。现在，我没有找到带有整个变量 url 的 React Router 的解决方案，即：

• domain.com/explorer/folder1/folder2/folder3/...

我可以做的是将深度限制为 5，然后手动执行：

{
    path: 'explorer',
    element: <Explorer />,
},
{
    path: 'explorer/:folder1',
    element: <Explorer />,
},
{
    path: 'explorer/:folder1/:folder2',
    element: <Explorer />,
},
{
    path: 'explorer/:folder1/:folder2/:folder3',
    element: <Explorer />,
},
{
    path: 'explorer/:folder1/:folder2/:folder3/:folder4',
    element: <Explorer />,
},
{
    path: 'explorer/:folder1/:folder2/:folder3/:folder4/:folder5',
    element: <Explorer />,
}

这看起来很老套，并且将我的深度限制为 5。我怎样才能实现这个目标？

Answer 1

对路线深度进行硬编码是一种方法，但正如您所看到的，它不太实用。另一种方法是编辑

Explorer

组件以递归方式渲染自身，作为道具向下传递下一级别的深度细节。

基本示例：

const Explorer = ({ depth = 0 }) => {
  const { folderId } = useParams();

  return (
    <>
      <div style={{ paddingLeft: `${depth}rem` }}>
        Folder: {folderId ?? "Root"}
      </div>
      <Routes>
        <Route path="/:folderId/*" element={<Explorer depth={depth + 1} />} />
      </Routes>
    </>
  );
};

const router = createBrowserRouter([
  {
    path: "/explorer/*",
    element: <Explorer />
  }
]);

假设 URL 路径

"/explorer/folder1/folder2/folder3/folder4/folder5/folder6/folder7"

: