reactjs - 使用可选路径和可选参数 React Router 4

Question

需要声明一个包含字符串和参数的可选路径
现在我有了这条路

<Route exact path="/tasks/:id" render={(props) => (
  <AsyncTask {...props} profile={this.state.profile} />
)} />

我需要

/tasks/:id/notification/:notificationId

其中 notification/:notificationId 是可选的
我尝试这样添加，但不起作用

/tasks/:id/(notification/:notificationId)?

我需要它来知道我是否来自通知链接，并将其标记为已读。

这正在工作

/tasks/:id/(notification)?/:notificationId?

但它匹配没有 notificationId 的路径

Answer 1

遗憾的是，似乎没有办法做到这一点。理想的方法是根据您的目的创建两个单独的路由。

<Route exact path="/tasks/:id" component={...} />
<Route exact path="/tasks/:id/notification/:notificationId" component={...} />

<小时/>

如果您确实必须只声明一个路由，则可以使用自定义正则表达式规则(参数名称声明后用括号括起来的部分):

<Route exact path="/tasks/:id/:notificationId(notification/\d+)?" component={...} />

但是!! - 请注意，notificationId 参数将包含子字符串“notification”。例如，如果您有:

tasks/123/notification/456

您将拥有 taskId 为 "123" 和 notificationId 为 "notification/456"(整个字符串)!

也就是说，上面的路由将匹配以下路径:

• 任务/123
• tasks/123/notification/456

但不是:

• 任务/123/通知
• tasks/123/notification/abc
• 任务/123/456

等等...

<小时/>

TL;DR - 您可能想要使用两条单​​独的路线，如上面第一个示例所示。