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

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

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

解决方案

  1. 在src 下建一个 lib文件 , 在建立一个 history.js
// lib/history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();
  1. 需要注意一下 下面代码组件 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>
  );
}
  1. 在 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);
  }
);

你可能感兴趣的:(项目遇到的问题,react.js,前端)