react 中token失效Router路由跳回login页面的(history出现白屏)解决方案

react 的路由使用

react 也有两种模式 hash 和 history 模式,使用方式是:

按照以下方式导入即可

在App.js中引入

 使用方式,<Router></Router>只需要在一级路由使用一次即可,也就是在App.js 中使用一次就可以了

回归正题

当用户的token过期,后台报401 错误时 , 我们需要清空token 和信息的同时也需要将页面跳转回login页面

但两种模式的处理方案不同

hash 模式的处理方案

 

 

 在 request.js写如下代码:

 这是一个原生的处理方案,但在history 模式下跳转时会有白屏的出现,所以只推荐在hash模式时使用

history 模式处理方案

第一步:

在App.js 中引入 Router ,不要引入

HashRouter   ==>  hash模式    或 

BrowserRouter  ==>  history 模式

 第二步

在 utils文件夹中创建 history.js 文件,写如下代码: 

第三步

 在App.js 中引入 history.js 文件 ,

 

并在 <Router></Router> 标签上使用 history={history} 属性, 这样一写也是 history 模式

第四步

在request.js 中引入 history.js 文件 

 

 这时 history.push('/login') 就可以使用了,并进行正常跳转,不会跳转中途出现白屏情况