estoy tratando de crear una página de inicio de sesión en reaccionar usando el código->

iniciar sesión.js

 axios.get(apiUrl) .then((result) => { //console.log(result.data); if (result.data.status === 200) { // transfer to dashboard page localStorage.setItem('isLoggedIn', true); alert(result.data.message); return navigate("/dashboard"); } else { alert(result.data.message); return navigate("/login"); } } )

ahora esto agregará un par clave-valor en el almacenamiento local.

ahora, para la página de mi tablero, estoy usando una barra de navegación de 'responsive-navbar-react'

aqui esta el codigo->

 const NavbarDashboard = () => { const props = { items: [ { text: 'Profile', link: '/dashboard' }, { text: 'Logout', link: '/', } ], logo: { text: 'logo', link: '/dashboard' }, style: { barStyles: { background: '#444', fontFamily: "'Lato', sans-serif", }, sidebarStyles: { background: '#222', buttonColor: 'white' } } } return <Navbar {...props} /> } export default NavbarDashboard;

esto funciona bien el valor se establece en el almacenamiento local. pero cuando trato de usar el siguiente código->

 { text: 'Logout', link: '/', onclick: localStorage.removeItem("isLoggedIn") }

el valor no está configurado en el almacenamiento local cuando intento iniciar sesión.

Quiero agregar la funcionalidad de cierre de sesión al hacer clic en el botón. alguien puede ayudar?

EDITAR------------

crear un componente de cierre de sesión separado

 import React from 'react'; function Logout() { let navigate = useNavigate(); localStorage.removeItem('isLoggedIn') return navigate("/"); } export default Logout; //end