react—非组件中使用history

1.问题场景

我们对token失效进行处理时，需要使用到history来进行跳转，但是在react中history是由useHistory调用得来的，所以我需要在非组件中拿到history对象进行使用

2.操作步骤

2-1、utils/history.js进行封装

import { createBrowserHistory } from 'history'
export default createBrowserHistory()

2-2、app.js一级路由配置进行全局传入

此时我们的路由也应该听从BrowserRouter变为Router

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

<Router history={history}>
      <Switch>
        {/* <Redirect form="/" exact to="/login" /> */}
        <Route path="/login" component={Login} />
        <Route path="/home" component={Layout} />
        <Route component={NotFound} />
      </Switch>
    </Router>

2-3 在响应拦截器中进行使用

import history from './history'
instance.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    // token失效的处理
    if (error.response.status === 401) {
      console.log('history', history)
      store.dispatch(logoOut())
      history.push('/login')
    }
    return Promise.reject(error)
  }
)