How to hide nav bar in login & signup page in react?

Question

I have my routes like this:

<Route handler={AppContainer}>
 <Route path="login" handler={Login} />
 <Route path="signup" handler={Signup} />
 <DefaultRoute handler={Home} />
</Route>

My AppContainer:

var AppContainer = React.createClass({
  render: function () {
    return (
      <div>
        <Header />
        <RouteHandler />
      </div>
    );
  }
});

Here the Header component gets rendered in all the pages. Is there a way to avoid header in login and sign up page.

You would usually set a flag and toggle it, Check https://www.npmjs.com/package/react-nav-bar for nav bars. — Neta Meta, Jun 30 '16 at 20:44
[Also you can see this solution:](https://stackoverflow.com/a/47282032/9278094) — Abdellah Baybay, Oct 07 '19 at 14:44

score 7 · Accepted Answer · answered Aug 27 '16 at 07:29

This means that your component (AppContainer) has state. Therefore you should have something like:

var AppContainer = React.createClass({
  
  // state management in here
  
  render: function () {
    let navHeader = this.state.isAuth ? <Header /> : '';
    return (
      <div>
        {navHeader}
        <RouteHandler />
      </div>
    );
  }
});

How to hide nav bar in login & signup page in react?

1 Answers1

Linked