如何在react-router v6中的react组件之外使用导航器，如axios拦截器

npm install react-router-dom

// interceptors.js
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

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

  axios.interceptors.request.use(
    (config) => {
      // 在发送请求之前做些什么
      return config;
    },
    (error) => {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );

  axios.interceptors.response.use(
    (response) => {
      // 对响应数据做点什么
      return response;
    },
    (error) => {
      // 对响应错误做点什么
      if (error.response.status === 401) {
        navigate('/login');
      }
      return Promise.reject(error);
    }
  );
};

export default useAxiosInterceptors;

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import useAxiosInterceptors from './interceptors';
import Home from './Home';
import Login from './Login';

const App = () => {
  useAxiosInterceptors();

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
};

export default App;