Conditionally rendering component based on routing in react

Question

Hello how i can conditionally rendering my component based on routing?

example of my app.js

const App = () => (
    <Container fluid>
        <Row>
          <Col lg="2">
            <Sidebar />
          </Col>
          <Col lg="10">
            <main>
              <Route exact path="/" component={Home} />
              <Route exact path="/login" component={Login} />
            </main>
          </Col>
        </Row>
    </Container>      
)

in this case i want to hide my sidebar component if routing is /login

Answer 1

You could add a Switch which renders nothing for the /login route, but renders the Sidebar for every other route.

const App = () => (
  <Container fluid>
    <Row>
      <Col lg="2">
        <Switch>
          <Route path="/login" />
          <Route path="/" component={Sidebar} />
        </Switch>
      </Col>
      <Col lg="10">
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login} />
          </Switch>
        </main>
      </Col>
    </Row>
  </Container>
);