可选路径反应路由器 4

Question

如何使用RouteReact Router 4 中的组件匹配可选路径？

例如，我有一个Orders要在 /account 和 /account/orders 上呈现的组件。

等效的将有两个 Route 组件来匹配两条路径。

<Route exact path="/account" component={Orders} />

<Route exact path="/account/orders" component={Orders} />

Answer 1

您可以像这样在react-router 4上使用 path param optional ：

<Route exact path="/account" component={Orders} />

<Route exact path="/account/orders?" component={Orders} />

因此，要将参数定义为可选参数，请添加一个尾随问号 (?)。同样对于多个可选参数：

<Route path="/account/:pathParam1?/:pathParam2?" component={Orders} />

Answer 2

我可以执行以下操作来匹配两条路径：

<Route exact path="/account/(orders)?" component={Orders} />