将路由器v4与如何将两个URL与一个路由和一个组件进行匹配

Question

抱歉，我的英语不够好。

版

4.1.1 我想匹配两个url与一个路由和一个组件。 如下所示：

http://host:port/test/orders/id-1 http://host:port/test/products/id-1 如何编写Route的路径？

感谢。

Answer 1

您可以使用 url path parameters 指定匹配相同路线的多条路径。

在你的情况下，路线看起来像

<Route path = "/test/:param/id-1" component={MyComponent}/>

如果您只想匹配/orders/ids-1和/products/id-1，那么您可以在路径参数中使用正则表达式。 react-router使用 path-to-regexp 理解的路径，

有关 react-router documentation

的相关文档

所以你可以使用

  <Route path = "/test/(orders|products)/id-1" component={MyComponent}/>