Перекрывающиеся маршруты в реакции-роутере

Question

У меня есть количество вложенных маршрутов, и я хочу, чтобы они отображались по одному.

Верхний маршрут, скажем, '/ sports'

<>
  <Route exact path={`${match.path}/favs`} component={LiveFavs} />
  <Route exact path={`${match.path}/:sportId`} render={props => <Live {...props.match.params} />} />
  <Route exact path={`${match.path}/:sportId/:eventId`} render={props => <LiveEvent {...props.match.params} />} />
</>

При переходе к /sports/favs должен отображаться ТОЛЬКО первый маршрут, но в настоящее время он смешан с маршрутом №. 2 (:sportId)

Answer 1

Вам необходимо импортировать компонент Switch из react-router-dom и обернуть его вокруг своих маршрутов. По сути, он проходит через ваши маршруты и отображает только первый маршрут, путь которого удовлетворен URL-адресом, по которому осуществляется переход.

Попробуйте это:

<Switch>
  <Route exact path={`${match.path}/favs`} component={LiveFavs} />
  <Route exact path={`${match.path}/:sportId`} render={props => <Live {...props.match.params} />} />
  <Route exact path={`${match.path}/:sportId/:eventId`} render={props => <LiveEvent {...props.match.params} />} />
</Switch>