React Router Dom v5 异步回调中useHistory.push无法跳转问题

问题复现 #

环境信息：react-router-dom@5.2.0
核心现象：登录组件中调用useHistory获取history对象，点击按钮触发异步登录接口，接口返回校验通过后调用history.push('/dashboard')跳转，实际无跳转效果；如果把history.push移到异步函数顶部同步执行，跳转正常。
相关代码：

import { NavLink, useHistory } from "react-router-dom";

export const Login = () => {
  const history = useHistory();

  const userLogin = async () => {
    const userResponse = await userLoginService(eMail, password);
    console.log(userResponse.userResponse);
    if (userResponse.userResponse.data) {
      toast.success("You have successfully logged in");
      history.push("/dashboard");
    } else {
      toast.error(userResponse.userResponse.error);
    }
  };

  return (
    <button className="btn mt-3 loginText" onClick={userLogin}>
      Login
    </button>
  )
}

根因分析 #

这个问题是react-router-dom 5.x版本的常见问题，本质都是异步执行阶段，useHistory返回的history对象和实际监听路由变化的history实例失去绑定，具体触发场景只有两种：

• 应用存在多个独立的Router实例
  如果在组件内部重复嵌套<BrowserRouter>/<HashRouter>，每一层Router都会创建独立的history对象。同步执行push时还能拿到当前上下文的临时引用触发更新，await异步等待之后，上下文切换，拿到的history和顶层Router绑定的监听实例不是同一个，push操作只会修改独立实例的路径，不会触发页面跳转。
• 异步返回时当前组件已经卸载
  如果点击登录后触发了loading状态切换、路由守卫拦截、父组件重渲染等逻辑，导致Login组件在接口返回前就被卸载，useHistory绑定的组件上下文已经销毁，后续执行的push操作自然不会生效。

修复步骤 #

按优先级依次排查即可：

1. 统一顶层Router实例
   把<BrowserRouter>（或项目使用的HashRouter）移动到应用最外层入口文件（通常是index.js），确保整个应用只有一个Router实例，所有业务组件都在Router的子树内，禁止在页面组件内部单独嵌套Router。
   正确入口示例：

// index.js
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

2. 校验组件挂载状态
   在组件内加挂载标记，避免组件卸载后执行无效的路由操作：

import { useRef, useEffect } from 'react'
export const Login = () => {
  const history = useHistory();
  const isMounted = useRef(true)

  // 组件卸载时更新标记
  useEffect(() => {
    return () => {
      isMounted.current = false
    }
  }, [])

  const userLogin = async () => {
    const userResponse = await userLoginService(eMail, password);
    // 组件已卸载直接中断逻辑
    if (!isMounted.current) return
    if (userResponse.userResponse.data) {
      toast.success("You have successfully logged in");
      history.push("/dashboard");
    } else {
      toast.error(userResponse.userResponse.error);
    }
  };
  // 按钮渲染逻辑不变
}

3. 兜底修复方案
   如果以上两步检查完还是不生效，用withRouter高阶组件包裹Login组件，直接通过props注入路由上下文的history实例，绕开useHistory的引用绑定问题：

import { withRouter } from "react-router-dom";

const Login = ({ history }) => {
  // 直接使用props传入的history，不要再调用useHistory获取
  const userLogin = async () => {
    const userResponse = await userLoginService(eMail, password);
    if (userResponse.userResponse.data) {
      toast.success("You have successfully logged in");
      history.push("/dashboard");
    } else {
      toast.error(userResponse.userResponse.error);
    }
  };

  return <button className="btn mt-3 loginText" onClick={userLogin}>Login</button>
}

export default withRouter(Login)

快速排查技巧：执行history.push前后打印history.location.pathname，如果push后pathname更新了但页面没跳转，100%是多Router实例导致的监听失效；如果push后pathname根本没变化，优先检查组件是否意外卸载。

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