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 } /> } 
/>

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

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

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} />