Categories
React Answers

How to hide navbar in login page in React Router?

Spread the love

Sometimes, we want to hide navbar in login page in React Router.

In this article, we’ll look at how to hide navbar in login page in React Router.

How to hide navbar in login page in React Router?

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.

For instance, we write

import React from "react";

const MyComponent = () => {
  //...
  return (
    <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>
  );
};

to put NavBar at the same level as the 2 Routes that needs authentication.

NavBar is one level deeper than the Route that renders the Login component, so NavBar won’t be rendered with Login.

Conclusion

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.

One reply on “How to hide navbar in login page in React Router?”

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.