How can I hide side navigation on some components?

Question

As I am new on ReactJS. I tried many solutions to implement the show/hide side menu on different components.

Requirement is:

a. When user is logged in then side menu shows on all components.

b. When user is logged out then It shows only some of the components like Forgot Password or Terms and condition(menus name changed as per the authentication) but hides on Login Component.

App.js

<Router>
  <SideNavigation />           
  <Routes />
</Router>

Routes.js

<Switch>
  <Route exact path="/login" component={Login} />
  <Route exact path="/forgotPassword" component={ForgotPassword} />
  <Route exact path="/termAndCondition" component={TermAndCondition} />
  <PrivateRoutes exact path="/" component={Dashboard} />
  <PrivateRoutes exact path="/emp" component={Employee} />
  <PrivateRoutes exact path="/empList" component={EmployeeList} />
</Switch>

This might help please check [simple-conditional-routing-in-reactjs](https://stackoverflow.com/questions/48497510/simple-conditional-routing-in-reactjs) — Nooruddin Lakhani, Oct 15 '20 at 13:53
Hi @NooruddinLakhani ....thanks for reply.........My condition is something different...I have to show side navigation when user is logged in but when user is logged out then I have to hide side navigation from login page only and shows on forgot password page....In this scenario it hides side navigation from forgot password page...that's not actually the requirement is .............thanks — Ricky, Oct 16 '20 at 08:04

score 0 · Answer 1 · answered Mar 25 '21 at 15:23

Use a simple state variable and keep track of the login status in your App.js. (for example - by useState() hook below)

const [isLoggedIn, setIsLoggedIn] = useState(false);

Pass a callback function to the Routes component and then to the Login Component.

<Routes onLogIn={()=>setIsLoggedIn(true)}/>

Routes.js Assuming it's a functional component (use this.props for class component).

<Route exact path="/login" >
    <Login onLogIn={props.onLogIn}/>
</Route>

You can then call the onLogIn() function from the Login component and update the state. Now, again in App.js -

const [isLoggedIn, setIsLoggedIn] = useState(false);
const [canShowNav, setCanShowNav] = useState(false);
const [currentComponent, setCurrentComponent] = useState(''); //default component shown

useEffect(()=>{                        //for determining canShowNav's value
    if(isLoggedIn)setCanShowNav(true)
    else{
        if(currentComponent === 'login'){ //add any other components you want where nav should not be shown
            setCanShowNav(false)
        }
        else setCanShowNav(true)
    }
}, [isLoggedIn, currentComponent])     

return(
    <Router>
      {canShowNav && <SideNavigation onComponentChange={(component)=>setCurrentComponent(component)}/>}           
      <Routes onComponentChange={(component)=>setCurrentComponent(component)} onLogIn={()=>setIsLoggedIn(true)}/>
    </Router>
)

Then call onComponentChange("componentName") from the SideNavigation whenever a link is clicked, passing the component's name which is clicked.
You can pass the onComponentChange function to the login page too, to change the state when user clicks on Forgot Password or anything like that and update the state.
Routes.js

<Route exact path="/login" >
    <Login onLogIn={props.onLogIn} onComponentChange={props.onComponentChange}/>
</Route>

Let me know if it helps you or not!✌

How can I hide side navigation on some components?

1 Answers1