ReactJS 执行dispatch登出操作后history.push路由跳转不生效问题

• 可能性1：高阶组件包裹顺序错误（React Router v5适用）
  你当前的高阶组件包裹顺序颠倒，connect包裹withRouter会导致组件拿到的history不是最新的路由实例，调整导出代码即可：

  // 调整前
  export default connect()(withRouter(Sidebar));
  // 调整后
  export default withRouter(connect()(Sidebar));
  

• 可能性2：React Router v6 兼容性问题
  v6版本已移除withRouter高阶组件，也不再暴露history对象，改用useNavigate钩子实现跳转，建议将跳转逻辑从action移到组件内：

  1. 改造action，移除history相关逻辑，返回Promise

  export const logoutUserAction = () => dispatch => {
    dispatchLoading(dispatch, LOGOUT_USER_ACTION);
    return firebase
      .auth()
      .signOut()
      .then(() => {
        window.localStorage.removeItem('user');
        AlertInfo('Success...', 'Successfully Logout...', 'success');
        dispatchSuccess(dispatch, LOGOUT_USER_ACTION, 'Success Logout!!!');
      })
      .catch(() => {
        window.localStorage.removeItem('user');
        AlertInfo('Oops...', 'Something Went Wrong...', 'error');
        dispatchError(dispatch, LOGOUT_USER_ACTION, 'Failed Logout!!!');
      });
  };
  

  2. 组件内调用后跳转（如果是类组件可以改造为函数组件使用钩子，或者通过父组件传递navigate方法）

  import { useNavigate } from 'react-router-dom'
  // 函数组件内部
  const navigate = useNavigate()
  
  <button 
    className="dropdown-item preview-item" 
    onClick={async () => {
      await dispatch(logoutUserAction())
      navigate('/auth/login')
    }}
  >
    Logout
  </button>
  

• 可能性3：路由鉴权逻辑冲突
  你登出后清除了localStorage的user信息，如果全局路由守卫的判断逻辑错误，会出现history.push到登录页后，被守卫立即重定向回dashboard的情况。请检查全局路由拦截逻辑：
  确认未登录状态下访问/auth/login不会被重定向到dashboard，正确逻辑应为：未登录用户仅可访问登录、注册等白名单路由，访问其他路由自动跳转至登录页；已登录用户访问登录页自动跳转至首页。

• 可能性4：history对象引用失效
  异步action执行时传参的history可能因为组件重渲染等原因和当前路由实例失去关联，建议统一将跳转逻辑放在组件侧执行，不要将history传递到action中处理，参考可能性2的改造方案即可。

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