CODEWITHSUNDEEP
reactjs
user3348410
user3348410

Reputation: 2833

Conditionally rendering component based on routing in react

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

Upvotes: 4

Views: 4546

Answers (2)

Tholle
Tholle

Reputation: 112777

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

Upvotes: 4

Cagri Yardimci
Cagri Yardimci

Reputation: 3529

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

Upvotes: 2

Related Questions