小编典典

使用可选路径和可选参数来响应路由器4

reactjs

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

<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


阅读 311

收藏
2020-07-22

共1个答案

小编典典

可悲的是似乎没有办法做到这一点。理想的方法是为您的目的创建两个单独的路线。

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

如果 确实 只需要声明一个Route,则可以使用自定义的regex规则(在参数名称声明后的括号中包裹的部分):

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

然而!! -请注意,该notificationId参数将包含substring "notification"。例如,如果您有:

tasks/123/notification/456

您将有一个taskIdof "123"notificationIdof "notification/456"(整个字符串)!

也就是说,上述路线将与以下路径匹配:

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

但不是:

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

等等…


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

2020-07-22