React中在非组件中获取到路由信息

1. 安装history包：yarn add history
2. 创建 utils/history.js文件
3. 在app.js中使用我们新建的路由并配置history参数
4. 通过响应拦截器处理 token 失效，如果发现是401调回到登录页

代码实现

• utils/history

// https://github.com/remix-run/react-router/issues/8264
 
import { createBrowserHistory } from 'history'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
const history = createBrowserHistory()
 
export {
  HistoryRouter,
  history
}

• app.js

import { HistoryRouter, history } from './utils/history'
 
function App() {
  return (
    <HistoryRouter history={history}>
       ...省略无关代码
    </HistoryRouter>
  )
}
 
export default App

• utils/http.js

import { history } from './history'
 
http.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response.status === 401) {
      // 删除token
      clearToken()
      // 跳转到登录页
      history.push('/login')
    }
    return Promise.reject(error)
  }
)