导航(‘/’)不导航

Question

我正在使用React路由器Dom v6。因此，对于我的web应用程序，我在userAction中创建了一个名为logoutUser的Redux操作，并在视图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)()}

Answer 2

如果logoutUser意味着是一个操作，那么您需要实际将该操作分派给您的redux存储。这假设您正确地添加了thunk (或其他类似的异步操作中间件)。

示例：

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