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

Question

我对路由组件有些迷惑。想象一下，我有这两条路线，它们有自己的路径：

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

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

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

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

Answer 1

找到一个可能的解决方案：您可以在路由周围使用Switch。然后它将只匹配第一个匹配的。

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

Answer 2

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

/locations/:locationId
/locations/new

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

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

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

这样的词

这些资源对我有帮助；

Exclude a value for a path parameter in React Router by type