允许在 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

如果组件由路由呈现，您可以递归地嵌入组件 - 然后您可以检查 this.props.match 路径名称，例如，在您的基本路由器中，您将拥有基本路由，/blog/:date，它呈现一个 Home 组件。

然后在 Home 组件中，您可以渲染另一个 Route（它仍然可以从这里开始工作，尽管它不是 Router 的直接子级），设置如下

<Route path={`${this.props.match.url}/:folder`} component={Folder} />

然后在 Folder 组件中，您将呈现相同的 Route，它将为路径中的每个 /:folder 逐步呈现 sub-components。

match 对象还包括 isExact，您可以使用它来确定您是否位于 URL.

文件夹结构的最后一层

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

Answer 2

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

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

This library 用于匹配路径。因此，对于更高级的匹配案例，这是一个比 React Router 文档更好的地方。

Allow slashes in route parameter on React