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

Tholle · Accepted Answer · 2019-02-13 09:42:57Z

4

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

answered Feb 13, 2019 at 9:42

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yoges nsamy Over a year ago

Won't the Col appear empty when the path is /login?

Cagri Yardimci · Accepted Answer · 2019-02-13 09:13:34Z

So there are actually a couple of approaches here. I assume you are using react-router-dom for extracting Route component and you directly render App component such as ReactDOM.render(<App />, rootElement);

If that is the case, the fastest solution based on your code snippet is that

const App = () => {
  const pathname = window.location.pathname
  return (
      <Container fluid>
        <Row>
          {pathname === '/login' ?
           <Col lg="2">
            <Sidebar />
          </Col> : null}
          <Col lg="10">
            <main>
              <Route exact path="/" component={Home} />
              <Route exact path="/login" component={Login} />
            </main>
          </Col>
        </Row>
    </Container>)      
}

If, you App component is used such as <Route exact path="somePath" component={App} />

Or, exported after being wrapped by withRouter Higher Order Component provided by react-router-dom, passing history, location and match props automatically handled by the routing library so you do the following update

const App = ({location: {pathname}}) => {
  return (
      <Container fluid>
        <Row>
          {pathname === '/login' ?
           <Col lg="2">
            <Sidebar />
          </Col> : null}
          <Col lg="10">
            <main>
              <Route exact path="/" component={Home} />
              <Route exact path="/login" component={Login} />
            </main>
          </Col>
        </Row>
    </Container>)      
}

I am assuming that, currently your code works the way you expect and your only concern is rendering SiderBar conditionally.

However, when setting up multiple routes, I would suggest utilizing Switch component provided by react-router-dom https://reacttraining.com/react-router/web/api/Switch

Also, instead of dynamically show/display SideBar component based on pathname, I would probably create a component such as MainLayout in the following way

const MainLayout = ({children}) => <div><SideBar/>{children}</div>

And update my Home component such as

const Home = () => <MainLayout>{content related to home page}</MainLayout>

So by this way, the SideBar would only be visible in the pages that you want it to be visible without checking pathname

The 'MainLayout' idea was exactly what I needed (but didn't know I was looking for)! Thanks!
@cagri Wouldn't MainLayout always show the Sidebar as it is attached to the MainLayout component?

Collectives™ on Stack Overflow

Conditionally rendering component based on routing in react

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related