javascript - 按类型排除 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>