用于导航目录的react-router

Posted 2021-04-16

我正在我的应用程序中构建一个组件，允许用户导航包含子目录和文件的目录。子目录的数量没有限制。

我想使用URL来指示子目录的位置。例如，采用这种结构：

- dir
-- sub-dir1
---- sub-dir2
------ sub-dir5
-------- image.jpg
---- sub-dir3
---- sub-dir4

如果有人导航到sub-dir5，那么我希望URL显示：

`myapp.com/dir/sub-dir1/sub-dir2/sub-dir5`

虽然如果使用:param值预先知道文件夹结构，我知道如何执行此操作，但我不确定如何在可能有任意数量的子目录时设置路由。

我正在使用react-router v4

答案

唯一的方法是创建一个根路由，它将接受一个（可选）参数，这是您的文件系统路径。

<Route exact path='/:path' component={ DirListing } />

然后，您需要在组件中解析它（由/拆分）以确保它有效。获得路径后，您可以加载文件列表并将其显示给用户。

我甚至会走得那么远，你真的不需要React Router，因为你最终会自己解析这些路线。 React Router make虽然有点容易。

最后一点，请确保将所有请求重定向回您的反应应用程序（或者您将最终得到服务器端列表）。