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

【问题标题】：Exclude a value for a path parameter in React Router by type按类型排除 React Router 中路径参数的值
【发布时间】：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 应该是一个数字？

【问题讨论】：

【解决方案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”之类的词

这些资源帮助了我；

【讨论】：