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

Question

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

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

}
报错了，如下：

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

//http.tsimport 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

我也曾经遇到过同样问题，错误原因是：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')    }}

希望对你有帮助

Answer 2

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

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

Answer 3

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

react-router-dom@5的方式

// history.jsimport { createBrowserHistory } from 'history'export default createBrowserHistory()

// App.jsimport { Router, Route, Switch } from 'react-router-dom'import history from './history'function App() {  render() {      return <Router history={history}>...</Router>  }}

// other.jsimport history from './history'history.push('/index')