Reactjs 切换到其他链接时，如何更改其他组件中的组件？

我的App.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>

---

我的auth组件register/login/etc工作得很好，因为它们不需要像主页中那样有边栏/标题。主页有边栏、标题和内容，当你们点击另一个链接时，这些内容应该会改变。如果我使用此链接在App.js中放置一个新路由，此组件将加载，但没有主页。

您需要有两个不同的容器。一个公共，一个私人。我在下面创建了一个示例，说明这应该是什么样子。调整它，并使用它，因为它适合你

PS I还在您的公共布局中添加了从/到/登录的重定向

const PublicLayout==>{ 回来 } const DefaultLayout==>{ 回来 /*你的其他路线都在这里 */ ; } const App=props=>{ const{loggedIn}=props；//将您的登录状态放在您拥有它的位置，我仅将其放在示例中 回来 {loggedIn？：} ; }

---

什么时候链接会切换到什么？您的主页位于/。我编辑了代码。这是DialogPage和MessagePage。当我在/dialog中时，我需要显示DialogPage组件。如果我点击DialogItem，我需要显示MessagePage。我的边栏和标题应该保持不变showing@fiorentina.gf请从react路由器查看withRouter。类似的问题：你可以在你的应用程序中有2个交换机，有不同的路由，只需添加另一个带有路由的交换机，其中你的注释代码是，只需将你主页的路由添加到交换机中？