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

最近做项目的时候发现在axios中不能使用react routerV6版本的路由编程式跳转本来以为可以使用 useNavigate 来实现的，实践过后发现根本不可以。解决方案在src 下建一个 lib文件，在建立一个 history.js// lib/history.jsimport { createBrowserHistory } from "history";export default

你还差的远呢。

7588人浏览 · 2022-03-30 10:49:02

你还差的远呢。 · 2022-03-30 10:49:02 发布

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

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

解决方案

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

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

需要注意一下下面代码组件 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>
  );
}

在 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);
  }
);