Невозможно правильно настроить реагирующий элемент маршрутизатора

Question

Я пытаюсь разработать экран пользовательского интерфейса в реакции, который выглядит так, как показано ниже на рис. 1, компонент пользовательского интерфейса содержит две ссылки, а именно L1 и L2, при щелчке по которым должен отображаться фактический компонент, который будет отображаться как показано на рис.2, который является фактическим желаемым результатом.

Но проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я нажимаю на L2, я получаю что-то вроде того, что показано на рис.3, что нежелательно, т.е. желаемый компонент визуализируется ниже L2. Я не могу понять, как на самом деле я должен организовать свой код реактивного маршрутизатора.

Layout. js

<Router>
    <div>
        <Link to="/component">Com</Link> 
        <br/> <br/>
        <Route exact path = "/" component = {welcome} />
        <Route path = "/component" component = {Com} />
    </div>
</Router>

Добро пожаловать. js

<Router>
    <div>
        <Link to="/component">Com</Link> 
        <Route path = "/component" component = {Com} />
    </div>
</Router>

Com. js

<div>
    This the actual component to be displayed on button clicks
</div>

ПРИМЕЧАНИЕ:

1. Если я нажму на ссылку L1 (см. рис.1), я получаю желаемый результат, вышеупомянутая проблема связана со ссылкой L2. Пожалуйста, помогите мне или дайте мне соответствующее предложение, которое могло бы решить мою проблему.

2. Welcome, Layout, Com должны быть разными компонентами, т.е. их нельзя объединять в один.

Спасибо

Answer 1

<Route exact path = "/component" component = {Com} />
<Route exact path = "/" component = {welcome} />

изменение маршрута исправит это