Question

<Route path="/:user" component={Home}>
  <Route path="/:thing(/:version)" component={Thing}/>
</Route>

所以，我的应用程序中有两个动态对象，我希望通过react-router中的路由参数控制。使用上面的代码，/0和/0/3都会将我带到Home。我需要/0/3带我去Thing。我不确定我在这里做错了什么... react-router甚至支持彼此相邻的多个动态参数？我无法在文档中找到任何内容。

Answer 1

这里发生的是你给了React Router两条路径，它们都可以在name上匹配。默认情况下，React Router匹配它可以找到的第一个。

要深入挖掘，如果我转到/anything，则React路由器无法知道您的意思是/pudding还是/:user。由于/:thing首先出现，因此将选择该选项。

您还需要确保嵌套路线是否符合您的要求。目前，您的/:user路由嵌套在Thing下方，这意味着它会通过Home组件中的this.props.children呈现。因此，对于您当前的Home路线，Thing也会一直呈现，Home作为孩子。如果您的Thing组件未呈现Home，则不会显示this.props.children。

我怀疑你只想要两个不同的页面。您可以采取以下措施：

Thing

这将使每个<Router history={history}> <Route path="/user/:user" component={Home} /> <Route path="/:thing(/:version)" component={Thing}/> </Router>转到/user/name组件，而其他Home（带有可选的额外级别）将转到/random。如果您想知道为什么在这种情况下React Router不会将Thing带到/user/name路由，这是因为它仍然按照指定路由的顺序进行匹配。由于您的Thing路由与请求的URL匹配，因此不再测试此路由的兄弟节点。

在React Router中使用多个参数？

1 个答案: