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

是的，您可以通过在路径路径中添加+来实现。因此，像这样：

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

This library用于匹配路径。因此，对于更高级的匹配案例，这是查看React Router文档的更好位置。

Answer 2

如果组件是由路径渲染的，则可以递归地嵌入它们-然后可以检查this.props.match的路径名，例如，在基本路由器中，您将拥有基本路径{{1 }}，呈现Home组件。

然后在Home组件中，可以使用

设置渲染另一个Route（尽管它不是Router的直接子代，但仍可以从此处开始工作）。

/blog/:date

然后在Folder组件内部，您将渲染相同的Route，它将逐步渲染路径中每个<Route path={`${this.props.match.url}/:folder`} component={Folder} />的子组件。

/:folder对象还包含match，可用于确定您是否位于URL的文件夹结构的最后一级。

来源：请参见this example的嵌入式路由。