使用自定义路径的React Router 4可选参数

Question

我在下面有一条加载仪表板组件的路线：

<Route
  path={`${match.url}/dashboard`}
  render={params => <Dashboard {...params} />}
/>

现在，我想添加一个可选参数，该参数仅在其前面带有附加路径（例如，additional-path /：param）时才有效。 我尝试了下面的代码，但没有得到可选参数的值：

<Route
  path={`${match.url}/dashboard/(filter/:filtername)?`}
  render={params => <Dashboard {...params} />}
/>

有人可以告诉我下面的代码怎么了吗？

Answer 1

在旧版本的React Router中，您可以使用括号定义可选参数，例如： `${match.url}/dashboard/filter(/:filtername)`

对于React Router V4，您可以在尾部定义可选的filtername参数？ 像这样：

<Route 
  path={ `${match.url}/dashboard/filter/:filtername?` } 
  render={ params => <Dashboard { ...params } /> } 
/>

或者，您可以定义多个可选参数filter和filtername ，如下所示：

<Route 
  path={ `${match.url}/dashboard/:filter?/:filtername?` } 
  render={ params => <Dashboard { ...params } /> } 
/>

Answer 2

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

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

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

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

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

---