如何使用反应路由器 dom 在另一个组件中渲染一个组件中存在的链接？答案

【问题标题】：How do you render Links present in one component in another component using react router dom?如何使用反应路由器 dom 在另一个组件中渲染一个组件中存在的链接？
【发布时间】：2020-06-22 01:19:40
【问题描述】：

假设我们有一个主组件、一个导航栏和一个侧边栏组件，现在我有一些指向电影、游戏和电视节目等的链接。如何在单击侧边栏中的链接时在主组件本身中呈现电影组件

app.js 代码

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

上述方法的问题是 URL 正在发生变化，但我没有得到组件，如果我包含路线，即电影或游戏等在 app.js 中，侧边栏和导航栏不会被渲染。我的问题是如何在 Main.js 本身中渲染电影组件或游戏组件，以便我获得侧边栏和导航栏以及给定的组件？有什么指导吗？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

由于电影、游戏是子组件，您可以尝试如下更改路径：

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

和

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

【讨论】：