Как вы отображаете ссылки, присутствующие в одном компоненте в другом компоненте, используя реагирующий маршрутизатор dom?

Question

Допустим, у нас есть основной компонент, а также компонент навигационной панели и боковой панели. Теперь у меня есть ссылки на фильмы, игры и сериалы и т. Д. c. Как визуализировать компонент фильма в самом главном компоненте при нажатии на ссылки в боковой панели

приложения. js код

//imports here

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

боковой панели. 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-адреса, но я не получаю компонент, если я включаю маршруты ie фильмы или игры и т. Д. В приложение . js тогда боковая панель и навигационная панель не отображаются. Мой вопрос, как вы визуализируете компонент фильмов или компонент игр в самом Main. js, чтобы я получил боковую панель и панель навигации, а также данный компонент? Любое руководство?

Answer 1

Поскольку фильмы, игры являются дочерними компонентами, вы можете попробовать изменить пути следующим образом:

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

и

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