javascript navigate('/')不导航

f8rj6qna 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(159)

我使用的是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>
  );

JavaScript

来源：https://stackoverflow.com/questions/72644191/navigate-doesnt-navigate

2条答案

按热度按时间

doinxwow1#

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

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

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

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

赞(0）回复(0）举报 2023-04-10

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

赞(0）回复(0）举报 2023-04-10

我来回答

javascript navigate('/')不导航

2条答案

相关问题

热门标签

最新问答