允许在 React 的路由参数中使用斜杠

Question

我有一个这样的路由器：

<Route path="/blog/:date/:folder" render={(props: any) => <Home />

它适用于：

http://localhost/blog/2017-05-20/test

但是，:folder可以有斜杠（子目录），我想一次解析文件夹中的所有路径。

这不是工作：

http://localhost/blog/2017-05-20/test/sub/dir

在这种情况下，我只得到test. 我想:folder作为test/sub/dir一个整体。

有没有办法用 React Router 实现这一点？

预期：

:date => '2017-05-20'
:folder => 'test/sub/dir'

实际的：

:date => '2017-05-20'
:folder => 'test'

Answer 1

是的，您可以通过将 a 添加+到您的路线路径来做到这一点。所以，像这样：

<Route path="/blog/:date/:folder+" ... />

该库用于匹配路径。所以对于更高级的匹配案例，这是一个更好的地方，然后查看 React Router 文档。