react在普通函数中跳转页面?

Question

封装了一个axios，想要在token过期的时候做返回登录页的统一处理，代码如下：
if (response.data.errno === 1) {

//登录过期回到登录页
let navigate = useNavigate()
navigate('/login')

}
报错了，如下：

使用window.location.href可以成功，除次之外，react还有别的跳转方法吗
这是当前的文件内容

//http.ts
import axios, { AxiosInstance } from "axios"
import { AxiosRequest } from "./types"
import { message, Spin } from 'antd';
import Loading from "./loading";
import { useNavigate } from "react-router-dom"
const navigate = useNavigate();
class HTTP {

    interceptRequest(response){
        if (response.data.errno === 1) {
            //登录过期回到登录页
            navigate('/login')
        }
    }

Answer 1

下面链接是react-router-dom@6的组件外跳转方式：
https://segmentfault.com/a/1190000044558173#item-6

react-router-dom@5的方式

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory()

// App.js
import { Router, Route, Switch } from 'react-router-dom'
import history from './history'

function App() {
  render() {
      return <Router history={history}>...</Router>
  }
}

// other.js
import history from './history'

history.push('/index')

Answer 2

报错的信息是hook只能在最顶层使用，可以参考文档，代码改成

const navigate = useNavigate();
if (response.data.errno === 1) {
  //登录过期回到登录页
  navigate('/login');
}

Answer 3

我也曾经遇到过同样问题，错误原因是：hooks只能在组件内部使用，不能在外面使用。
所以你再http.ts中使用const navigate = useNavigate()肯定是错误的。

你可以：
创建一个browserHistory.ts
内容如下：(需要安装依赖history)

import { createBrowserHistory } from 'history'

const browserHistory = createBrowserHistory({})

export default browserHistory

然后在你的http.ts中引入：

import browserHistory from '@/routes/browserHistory

...

interceptRequest(response){
    if (response.data.errno === 1) {
        //登录过期回到登录页
            browserHistory.replace('/login')
    }
}

希望对你有帮助