动态传递未知数量的参数来反应路由器

Question

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

像这样

Folder-1
  |_Folder-1-1
  |_Folder-1-2
    |_Folder-1-2-1
    |_Folder-1-2-2
      |_Folder-1-2-2-1
       .
       .
       .

并且它可以深入到任何级别。

目前，有一个组件可以加载根文件夹

Folder-1

。当您单击

Folder-1

时，路线会发生变化并导致加载另一个组件。

我的路线看起来像

<Route exact path="/clients/:folder" component={ClientFolder} />

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

我设想的方式是：

• 您点击

  Folder-1

  ，URL 更改为

  /clients/Folder-1

  。 然后，它加载Folder-1内的所有文件夹，即

  Folder-1-1

  和

  Folder1-2

• 您点击

  Folder-1-2

  ，URL 更改为

  /clients/Folder-1/Folder-1-2

  ，加载

  Folder-1-2

中的文件和文件夹

等等。

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

我正在使用react-router 5。

Answer 1

这可以通过使用全部匹配

*

来完成。比如：

<Route path="/clients/*">

无论在

/clients

之后经过什么路径都将在

match.params["0"]

中可用。

Answer 2

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

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