React中如何在非组件中使用history的hooks函数

1.最近看视频学习react时遇到的这样一个问题。针对登陆的token失效时，刷新页面。肯定是要跳转到登陆页面让用户重新登陆的，但是React中和Vue不同，跳转依赖于router的hooks函数useHistory.但是在组件中才可以使用history,push()进行跳转，在函数中直接是使用不了的。于是看到这样的解决办法

<1> 在utils下面新建一个history.js文件

import { createBrowserHistory } from "history";  // 这里的createBrowserHistory就是App.js中直接使用的BrowserHistory
const history = createBrowserHistory()
export { history }

<2> 在App.js中引入history

// 注意：此处，需要导入 Router 组件
import { Router } from 'react-router-dom'
import { history } from '@/utils'

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

<3> 在request.js拦截器中

import {history} from "@/utils/history"  // 引入定义的history

instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
},
  function (error) {
    // 对响应错误做点什么
    if (!error.response) {
      message.error("网络错误，请重新连接后再试", 1)
      return Promise.reject(error);
    }
    if (error.response.status === 401) {
      message.error("登陆信息过期,请重新登陆", 1)
      //清除token
      store.dispatch(lougout());
      // 跳转到登陆页
      history.push('/login'); 
    };
  });

然后就可以使用了，具体原理是react的router路由是有三个rouuter,BrowserHistory,hashHistory。.....好吧其实我也没懂😢