Как предотвратить совпадение двух маршрутов с react-маршрутизатором v4?

У меня есть следующие два маршрута: /items и /items/buy.

Каждый маршрут соответствует вкладке в одном представлении. Оба маршрута отображаются с точным реквизитом, но все же две вкладки помечаются как активные при переходе к /items/buy.

Я уже пробовал использовать withRouter, но я заметил, что изменение /items на /items/sell устраняет проблему, но я не хочу иметь этот маршрут.

Я понимаю, что rrv4 соответствует первой части моего маршрута /items и другой маршрут тоже /items/buy, но я думаю, что этого не должно произойти, если я использую exact. Есть какие-нибудь подсказки, почему это происходит?

Ах, я забыл сказать, что уже использую переключатель.

Спасибо за вашу помощь!
2 2
react-router react-router-v4

2 ответа:

Вам нужно поместить ваши маршруты в компонент <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>
7

Проблема заключалась в том, что я упаковывал NavItem с помощью LinkContainer, а у LinkContainer не было точной опоры. Добавление точного реквизита решило проблему!

1