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

本文介绍如何解决React Router V6版本中无法直接在Axios中进行编程式导航的问题,并提供了一种通过创建自定义历史实例的方法来实现跳转。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做项目的时候发现在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);
  }
);
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值