React Router 4 / path-to-regexp 多个可选段

Question

在 React router 3 中我可以有这样的路径：

/root(/id/:id)(/di/:di)

那将匹配

/root
/root/id/1
/root/di/2
/root/id/1/di/2

完美。

我不知道如何在 React Router 4 中做到这一点。所有示例都只做一件事。

使用Express Route tester我可以想出一条像

这样的路线

/root/id/:id?/di/:di?

但这只会匹配

/root/id/1/di/2

有解决办法吗？

Answer 1

在 React Router v4 中，您可以将正则表达式包含在 () 中。所以这个正则表达式应该可以工作并匹配您提供的所有路径：/root(/id/|/di/):id*(/id/|/di/)?:di*。在你给 link 的 Express router Tester 工具中，键 wont 出现在这个正则表达式中，但它确实有效，我在本地主机上测试过，键工作得很好.

请注意，我在第一次捕获组后没有使用 ?，即 (/id/|/di/)，因为如果我这样做，它将成为可选的，然后匹配 /root/12 之类的路径也是。

Answer 2

这是我最后的做法，虽然有点可笑，但确实有效：

  <Route
    path="/root/:firstKey?/:firstId?/:secondKey?/:secondId?"
    render={({ match: { params: { firstKey, secondKey, firstId, secondId } } }) => {
      const params = { [firstKey]: firstId, [secondKey]: secondId }
      return (<Whatever {...params} />)
    }}
  />

React Router 4 / path-to-regexp 多个可选段

React Router 4 / path-to-regexp multiple optional segments

express

react-router-v4