使用可选路径AND可选参数对路由器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，您可以使用自定义正则表达式规则（参数名称声明后括在括号中的部分）：

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

然而!! - 请注意notificationId参数将包含子字符串"notification"。例如，如果您有：

tasks/123/notification/456

您将taskId "123"和notificationId "notification/456"（整个字符串）！

也就是说，上面的路线将匹配以下路径：

• tasks/123
• tasks/123/notification/456

但不是：

• tasks/123/notification
• tasks/123/notification/abc
• tasks/123/456

等...

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

Answer 2

看起来在React Router [1]中没有任何支持。也许你可以只使用查询参数？ /tasks/:id?notification=notificationID。