动态传递未知数量的参数以响应路由器

Wae*_*eez 6 javascript reactjs react-router

在我的反应应用程序中,我具有创建文件夹和文件的功能。一个文件夹中可以包含任意数量的文件夹。

像这样

Folder-1
  |_Folder-1-1
  |_Folder-1-2
    |_Folder-1-2-1
    |_Folder-1-2-2
      |_Folder-1-2-2-1
       .
       .
       .
Run Code Online (Sandbox Code Playgroud)

它可以深入到任何级别。目前,我正在做的是。有一个加载根文件夹的组件Folder-1,当您单击时Folder-1。我更改路线并加载另一个组件。

我的路线看起来像 <Route exact path="/clients/:folder" component={ClientFolder} />

但这里的问题是我不知道参数的数量。

我设想的方式是

  • 您单击Folder-1,URL 更改为/clients/Folder-1,然后,它会加载 Folder-1 中的所有文件夹,即Folder-1-1Folder1-2
  • 您单击Folder-1-2,URL 更改为/clients/Folder-1/Folder-1-2,加载其中的文件和文件夹Folder-1-2

等等。

所以我的问题是,如何使用单个路由和单个组件拥有任意数量的嵌套路由

我正在使用反应路由器 5

小智 3

删除它会起作用的精确匹配

您可以参考此示例https://codesandbox.io/s/great-tu-yr85t