How to hide menu inside login page only in react js?

Question

I am a beginner to React! I just recently learned about React routing. But, I am a little confused.

How can I hide my navBar(Menu) inside the login page? I want to show all of the pages except the login page. How to do this in an easy way?

Below is the code for my AppComponent:

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            backgroundUrl: ''
        }
    }
    async componentDidMount(){

    }
    state = {  }
    render() { 
        return ( 
            <Router>
                <div>
                <Navigation/>
                <Switch>
                        <Route path='/' exact component={Dashboard}/>
                        <Route path='/About' component={About}/>
                        <Route path='/Contact' component={Contact}/>
                        <Route path='/Login' component={LoginConpoment}/>
                </Switch>
                </div>  
            </Router>

         );
    }
}

export default App;

Does this answer your question? [How to hide navbar in login page in react router](https://stackoverflow.com/questions/47281850/how-to-hide-navbar-in-login-page-in-react-router) — reymon359, Jun 07 '20 at 15:13

Ebdulmomen1 · Accepted Answer · 2020-06-07T17:37:16.840

You have to check the path and if it is /login you have to exclude navbar based on that.

here is how to do it:

1- wrap your export with withRouter like that export default withRouter(App);.

2- then you have to get location.pathname from the props.

the props are sent automatically to you by react because you have wrapped your component with a higher order component withRouter

import withRouter from react-router-dom first then it will be something like that:

import { withRouter } from "react-router-dom";

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            backgroundUrl: ''
        }
    }
    async componentDidMount(){

    }
    state = {  }
    render() { 
        return ( 
            <Router>
                <div>
                {this.props.location.pathname === "/login" ? "" : <Navigation/> }
                <Switch>
                        <Route path='/' exact component={Dashboard}/>
                        <Route path='/About' component={About}/>
                        <Route path='/Contact' component={Contact}/>
                        <Route path='/Login' component={LoginConpoment}/>
                    </Switch>
                </div>  
            </Router>

         );
    }
}

export default withRouter(App);

if you are getting this error:

You should not use <withRouter(App) /> outside a <Router>

then it means you have forgot to wrap your main react component around a browser router You should not use Route or withRouter() outside a Router

you should go to index.js and do this:

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
  , document.getElementById('root'));

its showing error like this : Error: Invariant failed: You should not use outside a — Vidhya, Jun 07 '20 at 15:36
you should wrap your main render code in Router https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route — Ebdulmomen1, Jun 07 '20 at 15:43
working fine :) but when I click on logout link then login page is showing with nav bar.how to solve this? — Vidhya, Jun 07 '20 at 16:20
@Vidhya i think it is better to post a new question for that matter and provide more information there, put the link in here i will try to help you with that too. — Ebdulmomen1, Jun 07 '20 at 18:34

How to hide menu inside login page only in react js?

1 Answers1