如何在Reactjs中制作类似angular的路由器出口?

时间:2018-08-30 15:26:55

标签: angular reactjs

我有 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均未呈现,这是怎么回事?

3 个答案:

答案 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组件。