Estoy usando React Router Dom v6 . Entonces, para mi aplicación web, creé una acción de Redux en userAction llamada logoutUser , y en view dashboard.jsx , agregué un botón de cierre de sesión que debería llevarme a la página de inicio ('/') . Mi problema es que hacer clic en cerrar sesión no hace nada, ¿está mal mi código?
userAction.js:
export const logoutUser = (navigate) => { return () => { sessionService.deleteSession(); sessionService.deleteUser(); navigate('/'); } }tablero:
import {useNavigate} from 'react-router-dom' const Dashboard = ({logoutUser}) => { const navigate = useNavigate(); return ( <div> <StyledButton bg={colors.red} to="#" onClick={()=>logoutUser(navigate)}> Logout </StyledButton> </div> );logoutUser está devolviendo una función en lugar de ejecutar las tareas que desea. O lo cambias a:
export const logoutUser = (navigate) => { sessionService.deleteSession(); sessionService.deleteUser(); navigate('/'); } O cambie su parte onClick , al código a continuación, para que ejecute la función devuelta por logoutUser :
onClick={()=>logoutUser(navigate)()}Si logoutUser está destinado a ser una acción, entonces debe enviar esa acción a su tienda redux . Esto supone que ha agregado correctamente el thunk (u otro middleware de acción asincrónica similar).
Ejemplo:
export const logoutUser = (navigate) => () => { sessionService.deleteSession(); sessionService.deleteUser(); navigate('/'); };...
import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; const Dashboard = () => { const dispatch = useDispatch(); const navigate = useNavigate(); return ( <div> <StyledButton bg={colors.red} to="#" onClick={() => dispatch(logoutUser(navigate))} > Logout </StyledButton> </div> ); };