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>

Possible duplicate of How to hide navbar in login page in react router — Anas Alweish
– Anas Alweish, Commented Nov 1, 2018 at 8:49

David Zhang · Accepted Answer · 2018-11-01 08:44:12Z

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 1, 2018 at 8:44

David Zhang

3462 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akashdeep Samantra Over a year ago

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 ?

David Zhang Over a year ago

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.

yavnelf · Accepted Answer · 2021-07-11 13:35:04Z

2

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;

answered Jul 11, 2021 at 13:35

yavnelf

3651 gold badge5 silver badges14 bronze badges

Comments

Ne X Ter · Accepted Answer · 2019-04-09 16:41:25Z

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 9, 2019 at 16:41

Ne X Ter

192 bronze badges

Comments

arfath77 · Accepted Answer · 2020-10-14 00:31:13Z

-1

Below piece of code worked for me

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

answered Oct 14, 2020 at 0:31

arfath77

313 bronze badges

Collectives™ on Stack Overflow

How to hide Nav bar in some react components

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related