How to hide navbar in login page in react router

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

Simplest way is use div tag and put components in which you want navbar and put login route component outside div tag:

<div className="App">
  <Router>

    <Switch>
      <Route exact path="/" component={Login} />
      <div>
        <NavBar />
   
        <Route exact path="/addproduct" component={Addproduct}></Route>
        <Route exact path="/products" component={Products}></Route>
     
      </div>

    </Switch>
  </Router>

</div>