Как сделать общий макет в роутах?

Question

У меня есть компонент Main в котором лежат компоненты header и sidebar, почему при переходе на дочерние роуты они не рендерятся. Хочу сделать так, чтобы макетные элементы оставались на странице, а обновлялась лишь часть страницы. Делаю так потому что есть окна авторизации и регистрации, где эти элементы не нужны

const App = observer(() => {

    const {user} = useContext(Context)

  return (
    <div className="App">
        <Router>
            <Routes>
                <Route path={LOGIN_ROUTE} element={<Login/>}/>
                <Route path={REGISTRATION_ROUTE} element={<Registration/>}/>
                <Route element={<Main/>}>
                    <Route path={HOME_ROUTE} element={<Home/>}/>
                    <Route path={SearchSpecialists_ROUTE} element={<SearchSpecialists/>}/>
                </Route>
            </Routes>
        </Router>
    </div>
  );
})

Answer 1

если я правильно всё понял, то ты почти всё правильно сделал, тебе надо только в <Main> добавить <Outlet />, примерно так:

export const Main = () => (
  <Wrapper>
    <Header />

    <Content>
      <Sidebar />
      <Outlet />
    </Content>

    <Footer />
  </Wrapper>
);

БЛОГ НА HUSL

Как сделать общий макет в роутах?

Ответы (1 шт):