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

Question

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

每条路线对应单个视图中的一个Tab。两条路线都使用 exact prop 呈现，但仍然有两个选项卡在导航到 /items/buy 时被标记为活动。

我已经尝试使用 withRouter，但我注意到将 /items 更改为 /items/sell 可以解决问题，但我不想使用该路线。

我知道 rrv4 与我的路线 /items 和另一条路线的第一部分相匹配 /items/buy，但我认为如果我使用 [=18= 则不应该发生这种情况].关于为什么会发生这种情况的任何线索？

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

感谢您的帮助！

Answer 1

您需要将路由放在 <Switch> 组件中。 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>

Answer 2

问题是我用 LinkContainer 包装了 NavItem，而 LinkContainer 没有确切的属性。添加确切的道具解决了问题！

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

How to prevent matching two routes with react-router v4?

react-router

react-router-v4