How to make something like router-outlet of angular in Reactjs?

user_7582501 0
Viewed 2780

I have sideBarMenuComponent which contains the following code in render()

     <ul>
        <li><Link to='/home'>Home</Link></li>
        <li><Link to='/settings'>Settings</Link></li>
      </ul>

and another MasterLayoutComponent which render HomeComponent and SettingsComponent in the main-content in render()

       <div className="MasterLayoutComponent">
          <Header />
            <div className="main-content">
               <Route exact path='/home' component={HomeComponent} />
               <Route exact path='/settings' component={SettingsComponet} />
            </div>
          <Footer />
        </div>

But when I click on the Links of sideBarMenuComponent the HomeComponent and the SettingsComponet aren't rendered, What is the wrong?

angular reactjs
2 Answers
user_102764950

Two points are missing in your code.

  • You didn't import your sidebar component in parent component.
  • You didn't wrap your overall container inside 'Router'.

After adding these steps your code will look like,

<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>

Make sure to import BrowserRouter as Router and Sidebar components.

user_128634390
Related