On logging out , the siderbar component is still visible

Question

Blockquote : this is the sidebar component, where the logout button and its method are written. for reference, I have shared the image below

function sidelink(val)
{
  
  return(
<li className={val.lis}>
       <i className={val.icon} aria-hidden="true"></i>
       <Link to={val.link} className={val.slink}>{val.name}</Link>
   </li>
  );
} 
function SideBar() {

  const history = useHistory();
  function logout() {
    localStorage.clear();
    history.push("/");
  }
  
    return (
     ...
       <Link onClick={logout} className="text-white text-decoration-none">LOGOUT</Link>
   ...
    )
}

export default SideBar

    function Admin() {  
const history = useHistory();
useEffect(()=> {
 if (!(localStorage.getItem('user_login'))&&!(localStorage.getItem('admin_login')))
  {
   
 history.push("/")
  }
    else
    {
        history.push("/admin")
    }
  },[])
  return (
      <div>
      <Router>
          <SideBar/>
              <Switch>
                  <Route exact path="/admin" component={Main}></Route>
                  <Route exact path="/course" component={CourseSection}></Route>
                  <Route exact path="/subject" component={SubjectSection}></Route>
                  <Route exact path="/faculty" component={FacultySection}></Route>
                  <Route exact path="/class" component={ClassSection}></Route>
                  <Route exact path="/constrain" component={ConstrainSection}></Route>
                  <Route exact path="/timetable" component={TimetableSection}></Route>
              </Switch>
      </Router>
      </div>
  )
}
export default Admin

Blockquote

on logging out the URL and main component working correctly but the sidebar component is still visible and after reloading it logout correctly

Answer 1

To achieve that you can use useState() hook to determine the state of authenticity.

    function Admin() {  
const history = useHistory();
//useState() ------
const [login,setLogin] = useState(false);
useEffect(()=> {
 if (!(localStorage.getItem('user_login'))&&!(localStorage.getItem('admin_login')))
  {
   //Not authenticated -------
   setLogin(false)
 history.push("/")
  }
    else
    {
   //Authenticated -------

      setLogin(true)
        history.push("/admin")
    }
  },[])
  return (
      <div>
      <Router>
          {login?<SideBar/>:""}
              <Switch>
                  <Route exact path="/admin" component={Main}></Route>
                  <Route exact path="/course" component={CourseSection}></Route>
                  <Route exact path="/subject" component={SubjectSection}></Route>
                  <Route exact path="/faculty" component={FacultySection}></Route>
                  <Route exact path="/class" component={ClassSection}></Route>
                  <Route exact path="/constrain" component={ConstrainSection}></Route>
                  <Route exact path="/timetable" component={TimetableSection}></Route>
              </Switch>
      </Router>
      </div>
  )
}