В вашем примере компонент, который вы хотите использовать в качестве ссылки для рендеринга другого компонента пользовательского интерфейса, не является какой-либо ссылкой, в React Router в этом случае вы должны использовать компонент <Link>. Если вы нажмете на <Link>, Router отобразит совпадающий <Route>, что означает, что в вашем приложении должно быть несколько <Route> (s). Кроме того, если у вас несколько <Route> s, вам нужно обернуть их компонентом <Switch>, если вы хотите визуализировать исключительно
просматривает своих дочерних элементов <Route> s и отображает первый, который соответствует текущему URL-адресу
Вот быстрый пример, более близкий к вашему:
https://codepen.io/shiponcs/pen/OJMEBRg?editors=0011
Подробнее вкл, React-router Link , Switch , Route