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

在React Router v6中，要在React组件之外使用导航器（如axios拦截器），您可以使用useNavigate钩子的origin属性来访问当前的导航函数

首先，确保您已经安装了react-router-dom：

npm install react-router-dom

然后，创建一个axios拦截器并在其中使用useNavigate钩子：

// 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;

接下来，在您的应用程序中使用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;

现在，当axios响应的状态码为401时，应用程序将导航到登录页面。请注意，这种方法可能会导致useNavigate钩子在组件之外被调用，因此您可能需要在使用此方法之前检查React版本是否支持这种用法。