React中Axios捕获错误后无法跳转指定页面，求解决方案

在Axios请求捕获到500状态码错误时，尝试用history.push("/error")和Redirect组件跳转至/error页面均未生效，但console.log(err)可以正常打印错误信息。相关代码如下：

const axiosInstance = axios.create({
  baseURL: baseURL,
  headers: {
    "Access-Control-Allow-Credentials": true,
    "access-control-allow-origin": "*",
    serviceKey: "",
  },
});

try {
  return await axiosInstance.get(path, {
    params: "",
    headers: {
      clientClaim: claim,
    },
  });
} catch (err) {
  if (err.response) {
    if (err.response.status === 500) {
      // 此处需要重定向至ServerError.js页面
      // console.log(err.response.status)可以正常输出
    }
  } else if (err.request) {
    console.log("I got request Error", err.request);
  } else {
    console.log("Some Error");
  }
}

问题原因 #

你之前的方法失效，大概率是因为错误处理代码不在React Router的上下文环境中：

• 如果这段Axios请求代码写在单独的工具文件（非React组件）里，useHistory/useNavigate钩子无法获取路由上下文，直接调用会报错或无效果；
• Redirect组件是React元素，必须在组件的JSX渲染流程中返回才会生效，直接在catch块里调用不会触发路由跳转。

解决方案 #

根据你的项目环境，选择对应的处理方式：

1. 函数组件 + React Router v6（推荐）

如果代码在React函数组件内，使用useNavigate钩子：

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

const YourComponent = () => {
  const navigate = useNavigate();
  const claim = "your-claim-value";
  const baseURL = "your-base-url";

  const fetchData = async () => {
    const axiosInstance = axios.create({
      baseURL: baseURL,
      headers: {
        "Access-Control-Allow-Credentials": true,
        "access-control-allow-origin": "*",
        serviceKey: "",
      },
    });

    try {
      return await axiosInstance.get(path, {
        params: "",
        headers: {
          clientClaim: claim,
        },
      });
    } catch (err) {
      if (err.response?.status === 500) {
        navigate("/error"); // 直接调用navigate跳转
      } else if (err.request) {
        console.log("I got request Error", err.request);
      } else {
        console.log("Some Error");
      }
    }
  };

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

2. 函数组件 + React Router v5

使用useHistory钩子：

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

const YourComponent = () => {
  const history = useHistory();

  // ...其他代码

  catch (err) {
    if (err.response?.status === 500) {
      history.push("/error");
    }
    // ...其他错误处理
  }
};

3. 类组件

通过withRouter高阶组件注入history属性：

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

class YourComponent extends React.Component {
  async fetchData() {
    // ...Axios实例和请求代码

    catch (err) {
      if (err.response?.status === 500) {
        this.props.history.push("/error");
      }
      // ...其他错误处理
    }
  }

  // ...组件其他方法
}

export default withRouter(YourComponent);

4. 代码在非组件文件（如独立的Axios工具类）

如果Axios实例是单独封装的，需要通过回调函数或状态管理传递路由跳转能力：

• 方法一：传递跳转回调

// axiosUtils.js
export const fetchData = async (path, claim, onErrorRedirect) => {
  const axiosInstance = axios.create({
    baseURL: baseURL,
    headers: {
      "Access-Control-Allow-Credentials": true,
      "access-control-allow-origin": "*",
      serviceKey: "",
    },
  });

  try {
    return await axiosInstance.get(path, {
      params: "",
      headers: {
        clientClaim: claim,
      },
    });
  } catch (err) {
    if (err.response?.status === 500) {
      onErrorRedirect(); // 调用传入的跳转回调
    }
    // ...其他错误处理
  }
};

// 组件内使用
import { fetchData } from './axiosUtils';
import { useNavigate } from 'react-router-dom';

const YourComponent = () => {
  const navigate = useNavigate();

  const handleFetch = async () => {
    await fetchData(
      "your-path",
      "your-claim",
      () => navigate("/error") // 传入跳转逻辑
    );
  };
};

• 方法二：使用自定义事件
  在工具文件里触发自定义事件，组件内监听事件并执行跳转：

// axiosUtils.js
catch (err) {
  if (err.response?.status === 500) {
    window.dispatchEvent(new CustomEvent('server-error', { detail: { status: 500 } }));
  }
}

// 组件内
useEffect(() => {
  const handleServerError = () => navigate("/error");
  window.addEventListener('server-error', handleServerError);
  return () => window.removeEventListener('server-error', handleServerError);
}, [navigate]);

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