react如何在非组件环境下拿到路由信息

非组件环境下拿到路由信息

用location.href直接赋值会导致页面刷新。

场景：通过响应拦截器来统一处理token失效时的跳转，响应拦截器里不能直接使用useHistory

背景

react-router-dom中直接有Router这个包，但是它Router 没有history属性

github：参考

安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象

如何在非组件内使用history跳转？

思路

单独引入Router，并自己创建history，

需要我们自定义 Router 的 history

步骤

1. 创建 utils/history.js 文件

2. 在该文件中，创建一个 hisotry 对象并导出

3. 在 App.js 中导入 history 对象

此时HashRouter，BrowerRouter不需要在写，只需要换成router即可

4.并设置为 Router 的 history

核心代码

单独封装history方法。

utils/history.js 中：和上图一直，可直接复制

// 自定义history对象
import { createBrowserHistory } from 'history'
​
const history = createBrowserHistory()
​
export default history

App.js 中：

// 注意：此处，需要导入 Router 组件
import { Router } from 'react-router-dom'
import history from '@/utils/history'
​
function App() {
  return (
    <Router history={history}></Router>
  )
}