我有 sideBarMenuComponent ,它在render()中包含以下代码
<ul>
<li><Link to='/home'>Home</Link></li>
<li><Link to='/settings'>Settings</Link></li>
</ul>
和另一个 MasterLayoutComponent ,分别呈现HomeComponent和 render()的主要内容中的SettingsComponent
<div className="MasterLayoutComponent">
<Header />
<div className="main-content">
<Route exact path='/home' component={HomeComponent} />
<Route exact path='/settings' component={SettingsComponet} />
</div>
<Footer />
</div>
但是当我单击sideBarMenuComponent的链接时,HomeComponent和SettingsComponet均未呈现,这是怎么回事?
答案 0 :(得分:1)
Router Outlet在Angular中是一个很好的功能,我尝试为React研究它。希望我能帮助您。 ^^ 我在这些链接中得到了答案: 1)https://www.npmjs.com/package/react-router-outlet 2)https://stackblitz.com/edit/react-router-outlet
答案 1 :(得分:0)
您必须将Router
包裹在Route
组件周围。
import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>
<div>
<Route exact path='/home' component={HomeComponent} />
<Route exact path='/settings' component={SettingsComponet} />
</div>
</Router>
react-router-dom
来源和培训:https://reacttraining.com/react-router/web/example/basic
答案 2 :(得分:0)
您的代码中缺少两点。
添加这些步骤后,您的代码将如下所示,
<div className="MasterLayoutComponent">
<Router>
<Header />
<Sidebar />
<div className="main-content">
<Route exact path='/home' component={HomeComponent} />
<Route exact path='/settings' component={SettingsComponet} />
</div>
<Footer />
</Router>
</div>
确保将BrowserRouter导入为Router和Sidebar组件。