React中axios请求完成后调用history.push重定向失败如何解决？

你遇到的问题核心是单独导出的history实例和React Router内部使用的实例不同步，这种情况在React Router v6版本中尤为常见：React Router v6的<BrowserRouter>内部会自行创建history实例，不会复用你外部通过createBrowserHistory生成的实例，所以你调用history.push时只会修改地址栏路径，不会触发React Router的组件渲染逻辑。

• 方案1：使用React Router内置的useNavigate钩子（最推荐，无需修改全局配置）
  仅修改当前业务组件代码即可生效：

// 首先从react-router-dom导入useNavigate
import { useNavigate } from "react-router-dom";

const NoTraineeAccount = () => {
  // 组件内调用钩子获取navigate方法
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);
  const [error, setError] = useState();

  // 省略其他原有代码...

  const upgrade = async () => {
    const JWT = new ClassJWT();
    const axiosReq = axios.create();
    await JWT.checkJWT();
    try {
      const res = await axiosReq.post(`${serverPath}/upgrade-to-trainer`, { token: JWT.getToken()})
      if (res.data.statusCode === "200") {
        // 替换原来的history.push
        navigate("/trainer");
      } else {
        setError(res.data.msg);
      }
    } catch (err) {
      setError(err);
    }
  };

  // 省略原有渲染逻辑...
}

• 方案2：全局绑定自定义history实例（适合需要在非组件环境调用路由跳转的场景）
  如果你确实需要保留全局history实例供非组件文件使用，修改根组件的路由配置，替换默认的<BrowserRouter>：

// 根组件（比如App.js）
import { Router } from "react-router-dom";
import { history } from "./services/history"; // 导入你自己的history实例

function App() {
  return (
    <Router location={history.location} navigator={history}>
      {/* 你的其他路由和组件 */}
    </Router>
  );
}

配置完成后你原来的history.push调用就可以正常触发组件渲染了。

你当前的upgrade函数混用了async/await和.then/.catch语法，统一用try/await写法可读性更高，同时可以添加取消请求的逻辑避免组件卸载后更新状态引发的警告：

const upgrade = async () => {
  const controller = new AbortController();
  try {
    const JWT = new ClassJWT();
    await JWT.checkJWT();
    const res = await axios.post(`${serverPath}/upgrade-to-trainer`, 
      { token: JWT.getToken() },
      { signal: controller.signal }
    );
    if (res.data.statusCode === "200") {
      navigate("/trainer");
    } else {
      setError(res.data.msg);
    }
  } catch (err) {
    if (!axios.isCancel(err)) {
      setError(err);
    }
  }
  return () => controller.abort();
};

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