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.