React Router 参数匹配问题

Question

大家在设计页面url的时候是怎么区分增删改查的？
如果像我这样来设计url的话，react-router会在/checkpoints/new的情况下同时匹配两条路由规则（第二和第四行）

<Route exact={ true } path='/checkpoints' component={CheckpointListScene}/>
<Route exact={ true } path='/checkpoints/new' component={CreateCheckpointScene}/>
<Route exact={ true } path='/checkpoints/edit/:checkpointId' component={EditCheckpointScene} />
<Route exact={ true } path='/checkpoints/:id' component={CheckpointDetailScene} />

怎样解决这个匹配重复的问题？使用了exact也没用。
如果有更好的url设计也可以

Answer 1

可以使用Switch组件:

<Switch>
  <Route exact={ true } path='/checkpoints' component={CheckpointListScene}/>
  <Route exact={ true }  path='/checkpoints/new' component={CreateCheckpointScene}/>
  <Route path='/checkpoints/edit/:checkpointId' component={EditCheckpointScene} />
  <Route path='/checkpoints/:id' component={CheckpointDetailScene} />
</Switch>