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 make history in App's state. And I hide navbar, when this pathname is '/' or '/login'.

It works!

But then I typed the ID and password, and clicked the login button, got 'success' result, and navigated to '/main'.

Now I can't see navbar in main component too.

How can I do this?

Sorry about my short english. If you can't understand my question, you can comment.

constructor(props) {   super(props);   this.state = {     isAlertOpen: false,     history: createBrowserHistory(),   };   this.toggleAlert = this.toggleAlert.bind(this); }  <BrowserRouter>   <div className="App">     {this.state.history.location.pathname === '/' || this.state.history.location.pathname === '/login' ? null       : <Header toggleAlert={this.toggleAlert} />}     <div className="container">       {this.state.history.location.pathname === '/' || this.state.history.location.pathname === '/login' ? null         : <Navbar />}       <Route exact path="/" render={() => <Redirect to="/login" />} />       <Route path="/login" component={Login} />       <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> </BrowserRouter> 

login(event) {   event.preventDefault();   userService.login(this.state.id, this.state.password).subscribe(res => {     if (res.result === 'success') {       global.token = res.token;       this.props.history.push('/main');     } else {       alert(`[ERROR CODE : ${res.statusCode}] ${res.msg}`);     } }); 

Answer 1

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

Answer 2

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>