按类型排除 React Router 中路径参数的值

Posted 2023-02-18

【中文标题】按类型排除 React Router 中路径参数的值

【英文标题】：Exclude a value for a path parameter in React Router by type

【发布时间】：2018-05-22 03:42:30

【问题描述】：

我有点卡在路由组件上。想象一下，我有这两条路线有自己的路径：

<Route path='/person/add' exact component=PersonForm/>
<Route path='/person/:id' exact component=PersonView/>

/person/add 应该显示一个表单，我可以在其中创建一个新的人/person/:id 应该显示一个具有给定 ID 的人。

问题>>如果我导航到 /person/add 它也会显示 /person/:id 的组件，因为字符串“add”对":id"。

有什么办法可以避免这种情况吗？例如告诉 :id 应该是一个数字？

【问题讨论】：

/person/add 应该只是/person 然后没有参数的状态是添加状态，您可以重复使用它进行编辑。这是有道理的：p

你可能会发现这个感兴趣***.com/a/35604855/1915893

@AluanHaddad 这确实是我解决它的方法，但我仍然在质疑是否有其他解决方案。谢谢！

我明白了。我确信有一种方法，但在 javascript 中确定哪些字符串是有效数字是令人惊愕的根源。

【参考方案1】：

找到一个可能的解决方案：您可以在路线周围使用Switch。那么它只会匹配第一个匹配的。

<Switch>
  <Route path='/person/add' exact component=PersonForm/>
  <Route path='/person/:id' exact component=PersonView/>
</Switch>

【参考方案2】：

我遇到的问题是我有几条路线；

/locations/:locationId
/locations/new

但是当我使用react-router 中的matchPath 函数时，当我使用/locations/new 时，它会返回/locations/:locationId 的误报。我通过将自定义正则表达式传递给我的标识符来解决这个问题；

/locations/:locationId([a-z0-9-]36)

这将检查我的“locationId”是否为 uuid，否则将不匹配。也可能排除诸如“new/edit/add”之类的词

这些资源帮助了我；

https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#custom-match-parameters https://regex101.com/