说明:为了能够在非组件环境下拿到路由信息,需要我们安装一个history包
实现步骤
- 安装history包:
yarn add history
- 创建
utils/history.js
文件 - 在app.js中使用我们新建的路由并配置history参数
代码实现
// utils/history.js
// 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
这样就可以将history导入使用push方法来跳转或者获取信息
// 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)
}
)