Почему не работает часть роутинга в React?

Question

[mimocrocodile]

У меня есть приложение App. Внутри него:
1. вложен кастомный компонент header (со ссылками на различные страницы проекта)
2. Link со ссылками на другие компоненты
2. настроен роутинг с путями, и они обёрнуты в <BrowserRouter>

Кастомный компонент PageHeader, внутри которого тоже настроен роутинг со своими ссылками.

Проблема: родительский компонент и дочерний. В каждом настроен роутинг на определённые ссылки. в обоих группах Link меняет url, но только в родительском компоненте они переходят по ссылкам, а дочернем pageHeader - нет.

Т.е. кликая по ссылкам внутри главного компонента - мы переходим по компонентам. При клике по ссылкам внутри дочернего - переход не работает.
В чём может быть проблема?

По ощущениям, что это какие-то проблемы рендеринга. Либо какая-то проблема с тем, что ссылки устанавливаются глубоко внутри дочернего компонента, тогда как контент, который должен отобразиться благодаря им, находится выше в иерархии элементов.
В чём может быть проблема и какие пути решения возможны?

Песочницу прикрепил:
https://codesandbox.io/s/clever-fire-fkc7i?file=/s...

Answer 1

[0xD34F]

BrowserRouter в PageHeader - убрать.

Comments

[mimocrocodile]

На случай, если у кого-то возникнет похожая проблема и он придёт сюда.
Да, действительно. Нашёл причину ошибки. Но есть маленький нюанс: если в дочернем компоненте просто убрать BrowserRouter, то тогда реакт выдаст ошибку о том, что Link нельзя использовать вне BrowserRouter. Поэтому, дочерний компонент, в котором будут использоваться Link-и нужно поместить внутри BrowserRouter родительского компонента.