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 1

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

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

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

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