如何使用 react router dom 在另一个组件中呈现一个组件中存在的链接？

Question

Let's say we have a main component, and a navbar and a sidebar component now I have some links to movies, games and tv shows etc. How do you render movies component in the main component itself upon clicking the links in the sidebar

app.js code

//imports here

<Router>
   <Route exact path='/login' component={Login} />
   <Route path='/admin' component={Main} />
</Router>

sidebar.js

//imports here
//styling
<ul>
<Link to='/movies'> <li>Movies </li> </Link>
<Link to='/games'> <li>games</li> </Link>
<Link to='/tv-shows'> <li>Tv shows</li> </Link>
</ul>

main.js

//imports here
<div>
  <Navbar/>
  <div>
  <Sidebar />
    <Switch>
      <Route path='/movies' component={Movies} />
      <Route path='/games' component={Games} />
      <Route path='/tv-shows' component={TvShows} />
    </Switch>
 </div>
</div>

The problem with above approach is URL is getting changed but I'm not getting the component, if I include the routes ie movies or games etc in app.js then sidebar and navbar are not getting rendered. My question how do you render the movies component or games component in the Main.js itself so that I get sidebar and navbar as well as the given component? Any guidance?

Answer 1

Since movies, games are child components you can try changing the paths as follows:

<Link to='/admin/movies'> <li>Movies </li> </Link>

and

<Route path='/admin/movies' component={Movies} />