How to change component in another component when switching to another link?

Question

My 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>

My HomePage looks like that:

<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>

My auth components (register/login/ etc) works perfectly because they don`t need to have sidebar/header like in homepage. HomePage has Sidebar, header and content, which should change when you click on another link. If I place a new Route in App.js with this link, this component will load, but without HomePage.

`when link will be switched` to what? Your home page is under `/`.. — Mosh Feu, Mar 31 '20 at 10:11
I edited my code. Here is DialogPage and MessagePage. When I`m in /dialog I need to show DialogPage component. If i click on DialogItem I need to show MessagePage. And my sidebar and header should stay showing — fiorentina.gf, Mar 31 '20 at 10:14
@fiorentina.gf Have a look at the `withRouter` HOC from `react-router`. Similar SO question: https://stackoverflow.com/questions/41911309/how-to-listen-to-route-changes-in-react-router-v4 — timotgl, Mar 31 '20 at 10:19
You can have 2 switches in your app, with different routes, just add another `Switch` with `Routes` where your commented code is — Sabbin, Mar 31 '20 at 10:20
The HomaPage component should have static always present components, and a switch with different routes mounting different components — Incepter, Mar 31 '20 at 10:22
I`ve already done that and added switch but it doesnt work for me. If I route my DialogPage on the link /dialogs I can see my component but without HomePage elements like sidebar and header — fiorentina.gf, Mar 31 '20 at 10:24
You need 2 different containers in order for that to work, If you want I can post an answer with a structure — Sabbin, Mar 31 '20 at 11:26

Sabbin · Accepted Answer · 2020-03-31T14:28:45.767

You need to have 2 different containers. One public, one private. I created an example below of how this should look like. Adapt it and use it as it fits you.

PS I also added a redirect in your public layout from / to /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>
  );
}

How to change component in another component when switching to another link?

1 Answers1