reactjs - 具有自定义路径的 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 } /> } 
/>