可选路径反应路由器4

Question

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

例如，我想要在/ account和/ account / orders上呈现Orders组件。

等价物将有两个Route组件来匹配两个路径。

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

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

Answer 1

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

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

Answer 2

您可以在 react-router 4 上使用路径参数可选：

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

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

因此，要将参数定义为可选参数，请添加尾随问号（？）。还有多个可选参数：

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