Blockquote: este es el componente de la barra lateral, donde se escribe el botón de cierre de sesión y su método. como referencia, he compartido la imagen a continuación
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 AdminCita en bloque
al cerrar la sesión, la URL y el componente principal funcionan correctamente, pero el componente de la barra lateral aún está visible y, después de volver a cargarlo, cierra la sesión correctamente
Para lograrlo, puede usar el gancho useState() para determinar el estado de autenticidad.
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> ) }