React router v6 如何使用 `navigate`。 Axios 拦截器

Question

React router v6 如何使用navigate。 Axios 拦截器

网上有很多例子。但是如何正确地做呢？如果可能，请提供详细说明。谢谢！

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: "http://URL.ru/",
    headers: {
        "content-type": "application/json",
    },
})

HTTP.interceptors.response.use(response => response, error => {
    if (error.response.status === 401) {
        //navigate('/login')
    }
    return Promise.reject(error)
})

Answer 1

如果将拦截器包装在功能组件中并在 app.js

中对其进行初始化，则可以向下导航拦截器

首先，让我们创建一个函数作为我们的拦截器 Promise，它应该将 navigate 作为参数

const AxiosInterceptorsSetup = navigate => {
    HTTP.interceptors.response.use(
        response => response,
        error => {
            if (error.response.status === 401) {
                navigate('/login');
            }
            return Promise.reject(error);
        }
    );
};

export default AxiosInterceptorsSetup;

现在我们需要在 app.js 中创建功能组件，它将使用我们的 AxiosInterceptorsSetup

function AxiosInterceptorNavigate() {
    let navigate = useNavigate();
    AxiosInterceptorsSetup(navigate);
    return <></>;
}


function App(props) {
   return (
       <BrowserRouter>
           {<AxiosInterceptorNavigate />}
            {...}
           </Routes>
       </BrowserRouter>
   );
}

React router v6 如何使用 `navigate`。 Axios 拦截器

React router v6 how to use `navigate`. Axios interceptors

reactjs

axios

interceptor