Как изменить компонент в другом компоненте при переходе на другую ссылку?

Question

Мое приложение. js:

<Router>
    <Route
        path="/"
        exact
        component={HomePage}
    />

    <Switch>
        <Route path="/register" component={Register} />
        <Route path="/login" component={Login} />
        <Route path="/forgot" component={ForgotForm} />
        <Route path="/reset" component={ResetForm} />
    </Switch>
</Router>

Моя домашняя страница выглядит так:

<Header />

<Container>
    <Row>
        <Col className="col-xs-3 col-sm-3 col-md-3 col-lg-3 col">
            <SideBar />
        </Col>

        <Col className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <SearchDialog />
            <DialogPage />
            <MessagePage />

            //I need to change components in this area when link will be switched
         </Col>
     </Row>
 </Container>

Мои компоненты аутентификации (регистрация / вход в систему / et c) работают отлично, потому что им не нужно иметь боковую панель / заголовок, как на домашней странице. HomePage имеет боковую панель, заголовок и контент, который должен меняться при нажатии на другую ссылку. Если я добавлю новый маршрут в приложение. js по этой ссылке, этот компонент загрузится, но без HomePage.

Answer 1

Вам нужно иметь 2 разных контейнера. Одна публикация c, одна частная. Ниже я создал пример того, как это должно выглядеть. Адаптируйте его и используйте так, как вам удобно.

PS Я также добавил перенаправление в ваш макет publi c с / до /login

const PublicLayout = () => {
  return(
    <Switch>
        <Route path="/register" component={Register} />
        <Route path="/login" component={Login} />
        <Route path="/forgot" component={ForgotForm} />
        <Route path="/reset" component={ResetForm} />
        <Redirect from="/" to="/login" />
    </Switch>
  )
}

const DefaultLayout = () => {
  return(
    <Header />
    <Container>
        <Row>
            <Col className="col-xs-3 col-sm-3 col-md-3 col-lg-3 col">
                <SideBar />
            </Col>

            <Col className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <SearchDialog />
                <DialogPage />
                <MessagePage />

                <Switch>
                  /* Your other routes go here 
                    <Route path="/blaBla" component={blaBla} />                  
                  */
                </Switch>
            </Col>
        </Row>
    </Container>
  );
}


const App = props => {
  const {loggedIn} = props; // Put your login state from where you have it, I put it for example only
  return (
    <Router>
      {loggedIn ? <DefaultLayout> : <PublicLayout>}
    </Router>
  );
}