在useEffect hook中调用router.push不生效，页面停留在加载页如何解决

故障原因排查 #

• 最常见原因：props解构错误，react-router v5版本中withRouter高阶组件向组件注入的是三个顶层属性：history、location、match，并不会注入名为router的对象。你当前从props里解构router拿到的是undefined，调用push自然不会生效。
• useEffect依赖项缺失：当前effect的依赖数组为空，若组件挂载时location还未初始化完成，或push方法引用发生变化，会导致逻辑执行不符合预期。
• react-router版本不匹配：若你使用的是react-router v6及以上版本，withRouter已经被官方移除，该写法本身不会注入任何路由相关props，自然无法生效。

解决方案 #

情况1：使用react-router v5版本 #

修改props解构逻辑，同时补全useEffect的依赖项即可：

import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';

const MyComponent = ({
  history: { push }, // 改为从history对象解构push，不是router
  location,
}) => {
  React.useEffect(() => {    
    Cookies.set('temp', '1');
    const value = 'test';
    const params = location.search ? `${location.search}` : '';
    push(`/${value}/my_path${params}`);
  }, [push, location]); // 补全依赖项
  return (<ShowLoading />);
};

export default withRouter(MyComponent);

情况2：使用react-router v6及以上版本 #

直接用官方提供的useNavigate hook代替withRouter写法，逻辑更简洁：

import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { useNavigate, useLocation } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();
  const location = useLocation();

  React.useEffect(() => {    
    Cookies.set('temp', '1');
    const value = 'test';
    const params = location.search ? `${location.search}` : '';
    navigate(`/${value}/my_path${params}`); // 用navigate方法代替原push
  }, [navigate, location]);

  return (<ShowLoading />);
};

export default MyComponent;

额外排查点 #

如果修改后还是不生效，可以做以下检查：

• 确认当前组件已经被包裹在BrowserRouter/HashRouter路由根组件下，所有路由相关的组件必须在Router上下文范围内才能调用路由能力
• 检查你要跳转的路径是否已经在路由表中注册，如果路径不存在可能会触发404逻辑而不是预期跳转
• 检查是否有路由拦截/守卫逻辑阻止了本次跳转，比如全局权限校验逻辑拦截了未登录状态的跳转请求

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