React-Router v6 useNavigate 非组件不生效

1. 官方文档&中文文档

React Router 官方文档

React Router 中文文档

2. 相关技术文档

升react-router v6后react-router-config不能用了

如何通过react-router-dom优雅的实现菜单权限和登陆拦截功能

如何优雅的使用react-router v6实现全局守卫

3. FAQ

3.1 react-router-dom useNavigate 在非组件不生效

How to use router inside axios interceptors. React and Vue

// src/router/globalRouter.ts
import { NavigateFunction } from "react-router-dom";

const globalRouter = { navigate: null } as {
  navigate: null | NavigateFunction;
};

export default globalRouter;

// src/main.tsx
import { Route, Routes, useNavigate } from "react-router-dom";
import globalRouter from "./globalRouter";

function App() {
  const navigate = useNavigate();
  globalRouter.navigate = navigate;
}

export default App;

// src/utils/request.ts
import globalRouter from "@/utils/globalRouter";
import axios from "axios";

const customAxios = axios.create();

customAxios.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (error.response.status == 401 && globalRouter.navigate) {
      globalRouter.navigate("/login");
    }
    return Promise.reject(error);
  }
);

export default customAxios;