javascript - 导航 ('/' ) 不导航

Question

我正在使用 React Router Dom v6。因此，对于我的 Web 应用程序，我在 userAction 中创建了一个名为 logoutUser 的 Redux 操作，并在 View dashboard.jsx 中添加了一个注销按钮应将我导航到主页 ('/')。我的问题是点击注销没有任何反应，是我的代码有误吗？

userAction.js:

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

仪表板:

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 正在返回一个函数，而不是执行您想要的任务。您可以将其更改为:

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

或者您将 onClick 部分更改为以下代码，以便您执行由 logoutUser 返回的函数:

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