无法正确配置反应路由器元素

Question

我正在尝试开发一个反应中的UI屏幕，该屏幕看起来如图1所示，UI组件包含两个链接，即L1和L2，单击这些链接应将要呈现的实际组件呈现为如图2所示，这是实际的期望输出。

但是我面临的问题是每当我单击L2时，都会出现如图3所示的效果，这是不希望的，即，所需的组件在L2之下呈现。我不明白我应该如何安排我的React Router代码。

Layout.js

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

Welcome.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} />

逆转路线将解决此问题