无法使用正则表达式从路由中获取参数答案

【问题标题】：Cannot get param from route with regex无法使用正则表达式从路由中获取参数
【发布时间】：2021-06-25 08:57:54
【问题描述】：

我有以下正则表达式 '(.*)/:id/(.*/)?add-relation/:type' 用于 React Router 路径，它希望适用于以下示例 url。那个部分（。*/）？是捕获 url 中的可选单词，例如 /preview 和 /tasks。

http://localhost:3000/ab/invoices/665/add-relation/invoice
http://localhost:3000/cm/company/665/add-relation/company
http://localhost:3000/ab/invoices/665/preview/add-relation/invoice 
http://localhost:3000/ab/invoices/665/tasks/add-relation/invoice 
http://localhost:3000/cm/company/665/preview/add-relation/company

我遇到的问题是，当我有上述可选词时，我无法获得id。

例如在下面的网址中 http://localhost:3000/ab/invoices/665/add-relation/invoice

我有 id 和 type 但是当 url 包含可选单词之一时，例如：http://localhost:3000/ab/invoices/665/preview/add-relation/invoice 我无法获得正确的 ID：

我应该如何更改正则表达式，以便获得正确的id？

【问题讨论】：

您可以使用useParams，它将返回一个包含所有参数的正确对象，您无需尝试手动正则表达式。
在您的示例中，您的 id 不应该是 665。 431 不知从何而来。
@Andy 这是两个不同的 url-s，具有不同的 id-s。不同的示例，但在这两种情况下，我都需要数字 id 431 或 665，但不需要预览。
@Rajdeep Debnath useParams 返回相同的输出。对于我收到的预览，这不是我想要的。
invoices\/(\d+)?并且 id 将是 match 数组的第二个索引。

标签： javascript reactjs regex react-router react-router-dom

【解决方案1】：

我通过更具体地解决第一部分的内容来解决它：

'(.*)/(invoices|orders|customers)/:id/(.*/)?add-relation/:type'

每个 ( ) 组成一个单独的组，因此通过添加 (invoices|orders|customers)，id 与第一个参数保持分离。

【讨论】：