React Router v6.4.3：Axios拦截器中如何实现页面跳转？

问题分析 #

• 令牌过期时需触发跳转登录页面，已在Axios响应拦截器中捕获401/403状态码
• 直接导出createBrowserRouter实例并调用router.navigate("/", { replace: true })无效，且React Router v6.4不再支持传统history对象
• 额外问题：当前跳转目标为受保护的/路径，即使跳转成功也会被ProtectedRoutes拦截，无法进入登录页面

解决方案 #

方案1：修正跳转目标并正确使用router实例的navigate方法 #

直接修改拦截器中的跳转路径为登录页，确保使用createBrowserRouter实例的navigate方法：

axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (axios.isAxiosError(error)) {
      if (error.response?.status === 401 || error.response?.status === 403) {
        localStorage.clear();
        // 改为跳转登录页，而非受保护的根路径
        router.navigate('/login', { replace: true });
      }
    }
    return Promise.reject(error);
  }
);

方案2：创建全局导航服务（适配组件外场景） #

如果router实例的navigate仍无法正常工作，可通过全局导航服务在组件外获取导航能力：

1. 创建导航服务文件（如src/utils/navigationService.js）

// 存储导航函数
let navigate;

// 设置导航函数
export const setNavigate = (navigateFn) => {
  navigate = navigateFn;
};

// 对外暴露导航方法
export const navigateTo = (path, options = {}) => {
  if (navigate) {
    navigate(path, options);
  }
};

2. 在根组件中初始化导航函数

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { setNavigate } from './utils/navigationService';
import { QueryClientProvider } from '@tanstack/react-query';
import { RouterProvider } from 'react-router-dom';
import { router, queryClient } from './router';

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

  useEffect(() => {
    // 将react-router的navigate函数存入全局服务
    setNavigate(navigate);
  }, [navigate]);

  return (
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}

export default App;

3. 在Axios拦截器中使用全局导航服务

import { navigateTo } from './utils/navigationService';

axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (axios.isAxiosError(error)) {
      if (error.response?.status === 401 || error.response?.status === 403) {
        localStorage.clear();
        navigateTo('/login', { replace: true });
      }
    }
    return Promise.reject(error);
  }
);

关键说明 #

• 优先检查跳转路径：确保跳转目标是无需权限的登录页，而非受保护路由
• 全局导航服务解决了组件外无法直接调用React Router hook的问题，适合Axios拦截器这类非组件场景

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