How to hide nav bar component in reactjs using protected route

Question

Hi there i have created a protected route in and passing navbar as parent component. then i passing child components in protected rout i want to hide navbar in some component on some action

Here is my protected.router.js code

import React from "react";
import { Route, Redirect } from "react-router-dom";
import Navbar from './component/Layouts/Navbar';


export const ProtectedRoute = ({
  component: Component,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (localStorage.getItem("loggedAsli") === "1") {
          return <div>  <Navbar/>
        <Component {...props} /> </div>;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
}; 

And this my App.js code

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import { ProtectedRoute } from "./protected.route";

import Learn from "./component/Learn/Learn";

class App extends React.Component {
  constructor(props) {
    super();
    this.updateUserLoginSetting = this.updateUserLoginSetting.bind(this);
    this.state = {
      userId: "",
      instituteId: ""
    };
  }

  updateUserLoginSetting = (userId, instituteId) => {
    this.setState({ userId: userId, instituteId: instituteId });
  };

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Route render={props => <Login />} exact path="/login" />

          <ProtectedRoute exact path="/Learn" component={Learn} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

How i can hide navbar in Learn Component

Please guide me. is there any global state handling

Answer 1

You could just pass a prop (e.g. showNav) and use it inside ProtectedRoute

export const ProtectedRoute = ({
  component: Component,
  showNav = true, // added showNav prop
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props => { //               check if should showNav
        if (localStorage.getItem("loggedAsli") === "1" && showNav) {
          return <div>  <Navbar/>
        <Component {...props} /> </div>;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",
                state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
}; 

And pass false when it's Learn

//         pass showNav as false to hide nav bar
<ProtectedRoute showNav={false} exact path="/Learn" component={Learn} />