捕获Axios请求错误时页面重定向失败的解决方法咨询

你的问题其实很常见——独立工具函数里没法直接访问React的路由上下文，再加上catch块里的this指向坑，导致跳转代码失效。我给你拆解下原因，再给几个靠谱的解决办法：

问题根源 #

1. this指向错误：你在catch里用了普通的function(error) {}，这里的this已经不是组件的上下文了，自然拿不到this.context.history。就算换成箭头函数，工具函数本身也不在React组件的渲染树里，没有权限获取路由context。
2. 路由API更新：如果用的是React Router v6，context.history已经被废弃了，现在官方推荐用useNavigate钩子来处理页面跳转。

解决方案 #

方案1：把导航方法传给工具函数（最直接） #

既然工具函数没路由权限，我们从调用它的组件里把导航方法传进去就行。

针对React Router v6：

1. 在调用的组件里获取navigate方法：

import { useNavigate } from 'react-router-dom';
import { getPublication } from './你的工具文件';

function YourPage() {
  const navigate = useNavigate();

  const fetchPublication = async (id) => {
    try {
      const data = await getPublication(id, navigate);
      // 处理请求成功后的逻辑
    } catch (err) {
      // 可选：这里也可以做额外的错误处理
    }
  };

  // 组件其他逻辑...
}

2. 修改工具函数，接收navigate参数：

import axios from 'axios';

export const getPublication = async (id, navigate) => { 
  const idJSON = {"id": id}; 
  try {
    const response = await axios({ 
      method: 'post', 
      url: 'users/getPublicationByID', 
      data: idJSON 
    });
    return response.data;
  } catch (error) {
    alert("Hello: " + error);
    // 用传入的navigate跳转
    navigate('/error');
    // 抛出错误让组件可以捕获（可选）
    throw error;
  }
};

针对React Router v5：

和v6类似，只是换成useHistory钩子：

1. 组件里获取history：

import { useHistory } from 'react-router-dom';

function YourPage() {
  const history = useHistory();

  const fetchPublication = async (id) => {
    try {
      const data = await getPublication(id, history);
    } catch (err) {}
  };
}

2. 工具函数里用history.replace：

export const getPublication = async (id, history) => { 
  // ...请求逻辑
  catch (error) {
    alert("Hello: " + error);
    history.replace('/error');
    throw error;
  }
};

方案2：全局导航实例（适合大型项目） #

如果项目里很多工具函数都需要跳转，可以搞个全局的路由实例，不用每次都传参数。

React Router v5写法：

1. 新建history.js文件：

import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

2. 工具函数里导入使用：

import { history } from './history';

export const getPublication = async (id) => { 
  // ...请求逻辑
  catch (error) {
    alert("Hello: " + error);
    history.replace('/error');
    throw error;
  }
};

React Router v6写法：

v6不支持直接创建history，我们可以在根组件里初始化一个全局navigate变量：

1. 在App.js里：

import { useNavigate } from 'react-router-dom';
export let navigate;

function App() {
  navigate = useNavigate();
  return (
    <Routes>
      {/* 你的路由配置 */}
    </Routes>
  );
}

2. 工具函数里导入使用：

import { navigate } from './App';

export const getPublication = async (id) => { 
  // ...请求逻辑
  catch (error) {
    alert("Hello: " + error);
    navigate('/error');
    throw error;
  }
};

方案3：组件层面处理错误（推荐） #

其实更符合代码设计原则的做法是：工具函数只负责发请求，错误处理和跳转交给组件来做，这样职责更清晰。

1. 工具函数简化，只抛出错误：

export const getPublication = async (id) => { 
  const idJSON = {"id": id}; 
  const response = await axios({ 
    method: 'post', 
    url: 'users/getPublicationByID', 
    data: idJSON 
  });
  return response.data;
};

2. 组件里自己处理catch和跳转：

import { useNavigate } from 'react-router-dom';
import { getPublication } from './你的工具文件';

function YourPage() {
  const navigate = useNavigate();

  const fetchPublication = async (id) => {
    try {
      const data = await getPublication(id);
      // 处理成功数据
    } catch (error) {
      alert("Hello: " + error);
      navigate('/error');
    }
  };

  // ...组件其他逻辑
}

总结 #

核心就是一句话：独立工具函数拿不到组件的路由上下文，所以要么把导航方法传进去，要么用全局实例，要么把错误处理放回组件。个人推荐第三种方案，代码更干净，职责更明确。

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