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') 就可以使用了,并进行正常跳转,不会跳转中途出现白屏情况