axios里面使用react-router-domV6版本的路由useNavigate 跳转的问题

最近做项目的时候发现在axios中不能使用react routerV6版本的路由编程式跳转

本来以为可以使用 useNavigate 来实现的，实践过后发现根本不可以。

解决方案

1. 在src 下建一个 lib文件 ， 在建立一个 history.js

// lib/history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();

2. 需要注意一下 下面代码组件 HistoryRouter 替换 BrowserRouter，下面代码只是一个参考

// App.jsx
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
import history from "lib/history";

function App() {
  return (
    <HistoryRouter history={history}>
      // The rest of your app
    </HistoryRouter>
  );
}

3. 在 axios中通过 history.push("/auth/login");跳转即可

// lib/axios.js
import history from "lib/history";
import storage from "utils/storage";

export const axios = Axios.create({})

axios.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response?.status === 401) {
      storage.clearToken();
      history.push("/auth/login");
      return Promise.resolve();
    }

    return Promise.reject(error);
  }
);