在React Router v4中匹配具有不同参数的2条不同路由

Question

我有一个我希望与两条路径匹配的组件：/和/:value。我的路线看起来像这样：

<Route path="/(|:value)" render={(props) => { return <MyComponent/>}}

以上路线与/匹配，但与/:value不匹配。如果我将路线硬编码为：

<Route path="/(|mypath)" render={(props) => { return <MyComponent/>}}

它会匹配/和/mypath。如何让我的路线与/和/any-value-i-put-here匹配？

Answer 1

您只需要使用条件参数指定路径，例如

<Route path="/:value?" render={(props) => { return <MyComponent {...props}/>}}

它将匹配/和/any-value。在此之后，您可以访问该参数，如果它存在，如this.props.match.params.value

  

P.S。此外，当您使用渲染时，请确保将道具传递给   渲染组件