Как правильно сделать вложенный Route в React?

Question

[Александр Кондаков]

Доброе утро. Надеюсь, что правильно сформулировал вопрос. Как правильно с точки зрения архитектуры приложения реализовать роутинг для андминки.
Имеем точку входа в админку.

<Route exact path='/admin' render={(props) => (<Admin {...props} data={state}/>)}/>

Все замечательно, работает, но как теперь в компоненте Admin сделать свой роутинг. Ведь у админки есть свой сайтбар, хотелось, чтобы только контент в теге main менялся.

<div className="wrapper">
		<h1 className="h1">Админка</h1>
		<div className="d-flex mt-40">
	    <aside className={style.asideMenu}>
		  <AdminMenu path={match.path} menu={data.adminSidebar}/>
	    </aside>
		<main>
		  <Switch>
			<Route path="/articles" component={AdminPageArticle} />
                        <Route path="/posts" component={AdminPagePosts} />
                        <Route path="/users" component={AdminPageUsers} />
		  </Switch>
		</main>
		</div>
	  </div>

Answer 1

[grinat]

Примерно так можно:

<Route path="/im/">
            <Topbar/> <---- тыц
            <Switch>
              <Route path="/im/dialogs" component={Dialogs}/>
              <Route path="/im/dialog/:id" component={Dialog}/>
            </Switch>
          </Route>

Answer 2

[Павел Диденко]

В чем проблема юзать соответствующие вашей потребности пути?
/admin/articles
/admin/posts
/admin/users

Comments

[Александр Кондаков]

Я так сначала и сделал, но проблема заключается в том, что тогда придётся копировать layout админки. А у нее своя шапка, свйо футер, свой сафтбар. Это не круто?

[Павел Диденко]

У вас есть такая штука как страницы (Pages) они состоят из компонентов. Вот компонент, который содержится в main вы импортируете и для админки и для обычных страниц, а хедер и футер юзаете какой вам удобно. Все же элементарно