1. 安装history包:yarn add history
2. 创建 utils/history.js文件
3. 在app.js中使用我们新建的路由并配置history参数
4. 通过响应拦截器处理 token 失效,如果发现是401调回到登录页
代码实现
// 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
}
import { HistoryRouter, history } from './utils/history'
function App() {
return (
<HistoryRouter history={history}>
...省略无关代码
</HistoryRouter>
)
}
export default App
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)
}
)