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