How to hide Nav bar in some react components

Question

I am trying to make a login flow using react. Routes are working as expected. But when I try to introduce nav bar, it is visible on all routes. I want to show nav bar only on selected components (only on profile and home route).

Any suggestions would be appreciated.

This is the Routes.js:

export default class Routes extends Component {
  render() {
    return (
      <Switch>
        <Route
          exact
          path='/*/home'
          component={Home}
        />
        <Route
          exact
          path='/*/login'
          component={Login}
        />
        <Route
          exact
          path='/*/profile'
          component={Profile}
        />
        <Route
          exact
          path='/'
          component={Main}
        />
        <Route
          exact
          path='/*/'
          component={Org}
        />
      </Switch>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

This is the App.js:

<div className="App">
  <Nav />
  <Routes />
</div>

Link https://stackoverflow.com/questions/47281850/how-to-hide-navbar-in-login-page-in-react-router — yusuf hayırsever, Nov 01 '18 at 08:38
Possible duplicate of [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) — Anas Alweish, Nov 01 '18 at 08:49

score 5 · Accepted Answer · answered Nov 01 '18 at 08:44

5

Your Nav component is being rendered in every view because it's located outside your views. There are a couple of options here:

Move Nav into home & profile only. This would make sense if you wanted to keep your Routes component the same.
Build a higher-order component for rendering a view withNav. This would be the best option if you need to render more than just home & profile with a Nav on top. Let's say you have a modal that needs to have the exact same Nav (for some reason), it may make sense to build an HOC
Change your component tree to reflect the structure that you need. If only home & profile need the Nav, it may make sense to declare those two routes in a separate component.

answered Nov 01 '18 at 08:44

David Zhang

346
2
13

I think your third option will work for me. For clarification, do you mean to say I should create a new routes component which will show nav bar and render it accordingly ? – Akashdeep Samantra Nov 01 '18 at 09:14
I think it depends on your `Org`, `Main` and `Login` views as they sound similar to `Home` and `Profile`. Ask yourself, what level of abstraction can I create to group these views? The simplest one I can think of without reviewing your app is a `NavableRoutes` component for anything with the `Nav` and a `NavlessRoutes` for the other ones. – David Zhang Nov 02 '18 at 09:36

score 2 · Answer 2 · answered Jul 11 '21 at 13:35

Here is the solution. Check useLocation hook in "react-router-dom"

function App() {
  const location = useLocation();

  return (
    <>
      {location.pathname === '/' ? null : <Navbar />}

      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/projects' component={Projects} />
        <Route path='/about' component={About} />
      </Switch>
    </>
  );
}

export default App;

score 0 · Answer 3 · answered Apr 09 '19 at 16:41

0

You can try Hiding the navbar in css, and Just show in Specific Component Using React-Helmet

 <Helmet>
      <style type="text/css">{`
    .navbar {
        display: inline
    }

`}</style>
    </Helmet>

answered Apr 09 '19 at 16:41

Ne X Ter

19
1

score -1 · Answer 4 · answered Oct 14 '20 at 00:31

-1

Below piece of code worked for me

 <style type="text/css">
      {`.navbar {display: none}`}
    </style>

answered Oct 14 '20 at 00:31

arfath77

31
3

How to hide Nav bar in some react components

4 Answers4

Linked