react-router - 如何防止使用react-router v4匹配两条路由？

Question

我有以下两条路线:/items和/items/buy。

每个路线在一个 View 中对应一个选项卡。两条路线均使用精确的 Prop 进行渲染，但导航至/items/buy时，仍将两个选项卡标记为事件选项卡。

我已经尝试过使用withRouter，但是我注意到将/items更改为/items/sell可以解决此问题，但是我不想这样做。

我知道rrv4与我的路线/items的第一部分匹配，而另一条路线也与/items/buy匹配，但是我认为如果我使用exact不会发生这种情况。关于为什么发生这种情况的任何线索？

啊，我忘了说我已经在使用Switch。

谢谢你的帮助!

Answer 1

您需要将路线放入<Switch>组件中。开关将仅呈现匹配的第一条路线。

import {Route, Switch} from 'react-router-dom';

<Switch>
  <Route exact path="/" component={Main} />
  <Route exact path="/items" component={SomeComponent} />
  <Route exact path="/items/buy" component={SomeOtherComponent} />
  <Route component={NotFound} />
</Switch>