React路由器:如何匹配嵌套路由的不确定子路径数量？

Question

我正在尝试创建像Dropbox这样的文件资源管理器。将有如下所示的不确定数量的子路径：

localhost:3001:file-manager/folder1/folder2/...folderN

我有这个：

<Route path="/file-manager/:folderName" component={LandingPage} />

这允许我访问：http://localhost:3001/file-manager/foo/bar/baz。但是，当我检查props.match时，我没有看到它，它只显示了foo的匹配，而不是低于该级别的级别(bar和baz)。

match:
isExact: false
params: {folderName: "foo"}
path: "/file-manager/foo"
url: "/file-manager/foo"

我该怎么做？我正在阅读和观看的关于递归路由的所有教程都附加到视图中。我想换个风景。

Answer 1

几个月前我也有同样的问题。我无法找到我目前使用的确切代码，但如果我没有记错，您可以使用星号来表示“从这里开始的一切”，其中包括任何进一步的路径分隔符：

<Route path="/file-manager/:folderName*" component={LandingPage} />

这确实意味着props.match.params.folderName将是完整的字符串，因此如果需要路径组件数组，则必须由/自己将其拆分。

重要的注意事项：*会让它匹配任何东西，所以如果你有一个你想要匹配的特定路线，确保你把它放在这个之前。

<Route path="/file-manager/example" component={ExamplePage} />
<Route path="/file-manager/:folderName*" component={LandingPage} />

Answer 2

我认为所发生的事情在某种程度上是正确的，因为在路由声明中只定义了一个层次的嵌套路由：

<Route path="/file-manager/:folderName" component={LandingPage} />

因此，找到的第一个路径参数(在您的例子中是foo)与folderName属性匹配，而其他路径参数则被忽略。

我从来没有做过这样的事情，但我只能想象使用动态路由定义来工作。当然，只有当您的应用程序为第一个路径生成的所有路由呈现相同的组件时，这才能工作。

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

像这样的事情应该可以防止你报告的问题。但是您必须放置一个外部路由定义来启动路由递归。在这种情况下，你的会很好。

<Route path="/file-manager/:folderName" component={LandingPage} />

您可以在这里的Recursive Routes章节中找到类似的东西。

希望这能有所帮助！