Resolved: navigate('/') doesn't navigate

Question:

I’m using React Router Dom v6. So for my web application, I created a Redux action in userAction called logoutUser, and in view dashboard.jsx, I added a logout button that should navigate me to the home page ('/'). My problem is that clicking on logout does nothing, is my code wrong?
userAction.js:

export const logoutUser = (navigate) => {
    return () => {
        sessionService.deleteSession();
        sessionService.deleteUser();
        navigate('/');
    }
}

dashboard:

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>
  );

Answer:

logoutUser is returning a function instead of executing the tasks you want. You either change it to:

export const logoutUser = (navigate) => {  
   sessionService.deleteSession();
   sessionService.deleteUser();
   navigate('/');
}

Or your change your onClick part, to the code below, so you execute the function retuned by logoutUser:

onClick={()=>logoutUser(navigate)()}

If you have better answer, please add a comment about this, thank you!

Resolved: navigate(‘/’) doesn’t navigate

Resolved: Filter objects with random number keys in Es6

Resolved: if(this != nullptr) returns true while this = nullptr)

Resolved: ASP.NET EF : Competitor model – Game model needs reference to two competitors

Leave A Reply