How to hide navbar in login page in react router

Question

I want to hide the navbar in a login page.

I did it actually, but I can\'t see the navbar on other pages.

This code is part of My App.jsx file.

I mak

Answer 1

The accepted answer has problem if you need to add other default route within the switch if no other route matches, e.g., 404 page, not found page.

I ended up using simple css to hide navigation bar inside my login page.

class LoginPage extends React.Component<>{

   ...

   // Hide navigation bar in login page. Do it inside ComponentDidMount as we need to wait for navbar to render before hiding it.
   componentDidMount(){
      document.getElementById('navigation-bar')!.style.display = "none";
   }

   componentWillUnmount(){
      document.getElementById('navigation-bar')!.style.display = "flex";
   }

   render(){
      return(
          // your login/signup component here
          ...
      )
   }

}

Answer 2

You could structure your Routes differently so that the Login component doesn't have the Header Like

<BrowserRouter>
  <Switch>
  <div className="App">
    <Route exact path="/(login)" component={LoginContainer}/>
    <Route component={DefaultContainer}/>

  </div>
  </Switch>
</BrowserRouter>

const LoginContainer = () => (
  <div className="container">
    <Route exact path="/" render={() => <Redirect to="/login" />} />
    <Route path="/login" component={Login} />
  </div>
)


 const DefaultContainer = () => (
    <div>
    <Header toggleAlert={this.toggleAlert} />
    <div className="container">
      <Navbar />
      <Route path="/main" component={Main} />
      <Route path="/user" component={User} />
      <Route path="/hw-setting" component={Setting} />
      <Route path="/hw-detail/:id" component={HwDetail} />
      <Route path="/gas-detail/:id" component={GasDetail} />
      {this.state.isAlertOpen ? <Alert /> : null}
    </div>
    </div>
 )