React 路由器：如何在不同的页面上渲染两个不同的组件？

【问题标题】：React router: How to render two different components on different pages?React 路由器：如何在不同的页面上渲染两个不同的组件？
【发布时间】：2023-03-26 23:39:01
【问题描述】：

我正在构建一个反应应用程序。我正在使用 react-router-dom V4。

class TodoApp extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Route path='/' component={TodoComponent}></Route>
                    <Route path='/about' component={About}></Route>
                </div>
            </Router>
        );
    }
}

如何在不同的页面上呈现这两个不同的组件？这是输出的样子：

TodoReact APP

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

您需要将exact 属性添加到您的根/ 路由，当前两个路由都匹配/about，因此两个组件都会显示：

<Route exact path="/" component={TodoComponent} />

【讨论】：

很高兴为您提供帮助！ :-)
这对路由链接是否同样有效？我的意思是我在同一个组件上获得了两个路由链接。如何避免它并在一页上获得一个路由链接以在组件之间切换