javascript navigate('/')不导航

f8rj6qna  于 2023-04-10  发布在  Java
关注(0)|答案(2)|浏览(158)

我使用的是React Router Dom v6。因此,对于我的Web应用程序,我在userAction中创建了一个名为logoutUser的Redux操作,并在视图dashboard.jsx中添加了一个注销按钮,该按钮应将我导航到主页('/')。我的问题是单击注销没有任何效果,是我的代码出错了吗?
userAction.js:

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

Jmeter 板:

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

doinxwow1#

logoutUser返回一个函数,而不是执行你想要的任务。你可以把它改为:

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

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

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

js81xvg62#

如果logoutUser是一个action,那么你需要 * 实际 * 将这个action分派到你的redux存储中。这假设你已经正确地添加了thunk(或其他类似的异步action中间件)。
示例:

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

相关问题