How to hide the navbar from the login page with react router?

Question

I'm trying to hide the navbar from the sign-in page, but i can't find a way to do it. I'm new to react, can someone please help me? Thanks in advance :)

This is my App.js component

    import React from "react";
    import { Route, Switch } from 'react-router-dom';

    
    class App extends React.Component {
          render() {
    
            return (
                <div>
                   
                    <NavBar />
                    <Switch>
                        <Route exact={true} path='/' component={HomePage} />
                        <Route path='/men' component={MensPage} />
                        <Route path='/woman' component={WomansPage} />
                        <Route path='/signin' component={SignInAndSignUpPage} />
                    </Switch>
                </div>
            )
    
        }
        };
    
        export default App;

This is my index.js file

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import App from './app';

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

please check this https://stackoverflow.com/questions/47281850/how-to-hide-navbar-in-login-page-in-react-router it has your's questions answer — Muhammad Iqbal, Aug 19 '20 at 10:43

score 1 · Answer 1 · answered Aug 19 '20 at 09:49

Ciao, you could use withRouter provided by 'react-router-dom' in this way:

import React from "react";
import { Route, Switch, withRouter } from 'react-router-dom';


class App extends React.Component {
      render() {

        return (
            <div>
               
                {this.props.location.pathname !== '/signin' && <NavBar />}
                <Switch>
                    <Route exact={true} path='/' component={HomePage} />
                    <Route path='/men' component={MensPage} />
                    <Route path='/woman' component={WomansPage} />
                    <Route path='/signin' component={SignInAndSignUpPage} />
                </Switch>
            </div>
        )

    }
    };

    export default withRouter(App);

And hide NavBar in case this.props.location.pathname === '/signin'.

Thank you so much. It works perfectly. Hope you have a wonderful day sir :) — mr_vmoore, Aug 19 '20 at 10:58
@mr_vmoore Glad to ear that. If you think answer was useful please mark it as valid. Have a nice day yuo too :) — Giovanni Esposito, Aug 19 '20 at 13:31

Elise Chant · Answer 2 · 2020-08-19T19:42:29.373

Try React Router's useLocation. You can then conditionally render based on location.

import React from "react";
import { Route, Switch, useLocation } from 'react-router-dom';

const App = () => {
  const { pathname } = useLocation();
  return (
    <div> 
     { pathname !== 'signin' && <NavBar /> }

Note, to use the Hook you will need to convert your class component to a function component. If you did not want to do this step, you could use React Router's withRouter HOC instead to access location:

import React from "react";
import { Route, Switch, withRouter } from 'react-router-dom';

class App extends React.Component {
  render() {
    const { location: { pathname } } = this.props;
    return (
      <div> 
       { pathname !== 'signin' && <NavBar /> }
         // ...
  }

export default withRouter(App);

Thank you :). I will stick with withRouter, it seems appropriate for my needings now. Wish you a happy day — mr_vmoore, Aug 19 '20 at 11:00

Hamid Reza Sedigh · Answer 3 · 2023-08-16T03:38:13.107

In react-router-dom v6 you can use outlet, I change your code to work with v6 like this:

import React from "react";
import { Route, Switch, Outlet } from 'react-router-dom';


class App extends React.Component {
  render() {

    return (
        <div>
            <Switch>
                <Route path="/signin"  element={<SignInAndSignUpPage />} />
                <Route
                element={
                    <>
                    <NavBar />
                    <Outlet />
                    </>
                }
                >
                <Route path="/"    exact element={<Dashboard />} />
                <Route path='/men'       element={<MensPage/>} />
                <Route path='/woman'     element={<WomansPage/>} />
            </Switch>
        </div>
    )

  }
};

How to hide the navbar from the login page with react router?

3 Answers3