Панель инструментов приложения

Я создаю приложение, используя ReactJS. Я использую реагирующий маршрутизатор v4 от react-router-dom .

Я написал маршруты в файле index.js.

 {amp}lt;BrowserRouter{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/" component={Login} /{amp}gt; {amp}lt;Route exact path='/dashboard' component={Viewport} /{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/BrowserRouter{amp}gt; 

Остальная часть приложения в файле Viewport.js.

  return ( {amp}lt;div className=""{amp}gt; {amp}lt;Sidebar navigation={this.viewport} /{amp}gt; {amp}lt;HeaderBanner user={this.props.user} /{amp}gt; {amp}lt;div className="center-panel"{amp}gt; //todo //Can I use router here? {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) 

После входа пользователя я отображаю Viewport, который по умолчанию содержит боковую панель и панель заголовка. Основываясь на щелчке элемента в боковой панели навигации, мне нужно визуализировать компоненты динамически. На данный момент, если я пишу что-либо вместо todo, он отображает только этот компонент для полного окна браузера. Есть ли способ использовать маршрутизаторы в нескольких местах приложения? Если да, как я могу это реализовать? Если нет, какое лучшее решение? Насколько я видел, маршрутизаторы будут размещены в одном месте приложения.

Заранее спасибо.

Я недавно последовал учебник на YouTube, который был очень полезным

Поэтому я взял некоторые из них и применил их к вашей настройке

 {amp}lt;BrowserRouter{amp}gt; {amp}lt;div{amp}gt; {amp}lt;Route exact path="/" component={Login} /{amp}gt; {amp}lt;Route exact path='/dashboard' component={Viewport} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/BrowserRouter{amp}gt; import { NavLink, Route } from 'react-router-dom'; class Viewport extends Component { constructor(props) { super(props); } render() { return ( {amp}lt;div{amp}gt; {amp}lt;div className="Side-bar"{amp}gt; {amp}lt;NavLink activeClassName="active" to={`${this.props.match.url}/sub-page-name-1`}{amp}gt;Sub Page 1{amp}lt;/NavLink{amp}gt; {amp}lt;NavLink activeClassName="active" to={`${this.props.match.url}/sub-page-name-2`}{amp}gt;Sub Page 2{amp}lt;/NavLink{amp}gt; {amp}lt;NavLink activeClassName="active" to={`${this.props.match.url}/sub-page-name-3`}{amp}gt;Sub Page 3{amp}lt;/NavLink{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;HeaderBanner user={this.props.user} /{amp}gt; {amp}lt;div className="center-panel"{amp}gt; {amp}lt;Route path={`${this.props.match.url}/sub-page-name-1`} component={SubPagePanel1} /{amp}gt; {amp}lt;Route path={`${this.props.match.url}/sub-page-name-2`} component={SubPagePanel2} /{amp}gt; {amp}lt;Route path={`${this.props.match.url}/sub-page-name-3`} component={SubPagePanel3} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } } 

Я также удалил Switch потому что не использовал его для своих подстраниц …: -S

Обновление : создал репозиторий, показывающий рабочий пример содержимого подстраницы

https://github.com/PocketNinjaDesign/so-sub-routes-answer

Да, вы можете использовать {amp}lt;Routes{amp}gt; в любом количестве мест. Компоненты {amp}lt;Router{amp}gt; можно использовать только один раз.