React router v6 如何在 axios 拦截器中使用“navigate”重定向

使用React Router v6进行导航和路由管理是非常方便和高效的。当我们需要在axios拦截器中使用"navigate"进行重定向时，可以通过以下步骤来实现。在本文中，我们将介绍如何在axios拦截器中使用"navigate"重定向，并提供一个简单的示例代码来演示。

javascript
import axios from 'axios';
import { navigate } from 'react-router-dom';

javascript
const instance = axios.create();
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      navigate('/login'); // 使用navigate进行重定向
    }
    return Promise.reject(error);
  }
);

javascript
import React, { useEffect } from 'react';
import axios from 'axios';
import { navigate } from 'react-router-dom';
const instance = axios.create();
instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      navigate('/login'); // 使用navigate进行重定向
    }
    return Promise.reject(error);
  }
);
const App = () => {
  useEffect(() => {
    instance.get('/api/data')
      .then((response) => {
        // 处理响应数据
      })
      .catch((error) => {
        // 处理错误
      });
  }, []);
  return (
    
      {/* 应用的其他内容 */}
    
  );
};
export default App;