0

У меня есть компонент 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>
  );
})

1
  • Очень мало деталей. И даже пример не действующий, только кусок...
    – ksa
    23 дек 2022 в 5:46

1 ответ 1

0

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

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

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

    <Footer />
  </Wrapper>
);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.