如何在React入口文件的Axios拦截器中使用路由导航？

在你的场景中，Axios拦截器不属于React组件，无法直接使用useNavigate钩子，但可以通过直接调用路由实例的navigate方法实现页面跳转，具体步骤如下：

1. 确认你的router实例是通过react-router-dom v6的createBrowserRouter创建的，该实例自带navigate方法（你的代码中已导入router，无需额外配置）。

2. 在refreshToken接口返回401的处理逻辑中，添加router.navigate("/login")即可：

修改后的拦截器关键代码片段：

if(error.config.url=="http://localhost:5000/api/refreshtoken" && error.response.status === 401){
  console.log("here we go")
  store.dispatch(LOGOUT())
  // 调用路由实例的navigate方法跳转登录页
  router.navigate("/login");
}

备选兜底方案 #

如果你的路由配置不支持直接调用navigate方法，可使用页面硬刷新的方式跳转（仅作为兜底，不推荐）：

window.location.href = "/login";

额外提示 #

• 建议在dispatch(LOGOUT)之后执行导航，确保登录状态已清理完成
• 若路由跳转后仍有异常，可检查router实例是否正确导出（需确保是createBrowserRouter返回的实例）

内容的提问来源于stack exchange，提问作者Gunaraj Khatri