React Router Dom v6中navigate('/')调用后无法跳转首页问题

点击退出按钮无响应是两个问题共同导致的：

• 你编写的logoutUser是Redux Thunk格式的异步action，这类action不能直接在组件中调用，必须通过Redux的dispatch方法触发，否则action内部返回的执行函数永远不会运行，清理会话、路由跳转的逻辑完全不会执行。
• 退出按钮上添加了to="#"属性，如果你的StyledButton是基于React Router的Link/NavLink组件封装的，这个属性会拦截点击事件，和自定义的onClick逻辑、后续路由跳转产生冲突。

1. 修正组件内的action触发逻辑 #

在组件中引入useDispatch钩子获取dispatch方法，通过dispatch触发退出action，同时去掉按钮上多余的to="#"属性，参考代码如下：

import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
// 替换为你项目中userAction的实际路径
import { logoutUser } from './path-to-your/userAction'

const Dashboard = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleLogout = () => {
    dispatch(logoutUser(navigate))
  }

  return (
    <div>
      <StyledButton bg={colors.red} onClick={handleLogout}>
        Logout
      </StyledButton>
    </div>
  );
}

注意：如果你之前是把logoutUser通过connect的mapDispatchToProps传入组件的，也要确认写法正确，不要直接把未经过dispatch包装的action函数传给组件。

2. 确认Redux Thunk中间件配置正常 #

• 如果你使用Redux Toolkit创建store，默认已经内置了Thunk中间件，不需要额外配置。
• 如果你是手动搭建的原生Redux store，需要确认已经安装并在createStore时应用了redux-thunk中间件，否则Thunk格式的action无法正常执行。

可选优化：解耦状态逻辑和路由逻辑 #

更推荐的写法是不在Redux action中处理路由跳转，把路由逻辑放在组件侧，让action只负责状态清理，代码复用性更强：

// userAction.js
export const logoutUser = () => {
    return (dispatch) => {
        sessionService.deleteSession();
        sessionService.deleteUser();
        // 此处可dispatch清空用户全局状态的action
        // dispatch(clearUserInfo())
    }
}

// 组件内的退出逻辑
const handleLogout = () => {
  dispatch(logoutUser())
  navigate('/')
}

内容的提问来源于stack exchange，提问作者Darkpsinight