如何在react中禁止浏览器后退

本人公司项目，业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。
首先，想到了监听鼠标事件，鼠标监听事件包括以下几种：

click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover(mouseenter)：移入事件。
mouseout(mouseleave)：移出事件。
contextmenu：右键事件
上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键
因此，采用了另外一种禁止浏览器后退的方法

componentDidMount(){window.addEventListener('popstate', function () {history.pushState(null, null, document.URL);});
}

注意：禁止回退到哪个页面，代码就加入到哪个页面中。
列如从A跳转到B。如果禁止B页面回退到A。则上述代码加入到A页面中。
可能出现的报错
意外的使用history no-restricted-global（禁用特定的全局变量）
解决方式：‘在history前面加widnow.’

componentDidMount(){window.addEventListener('popstate', function () {window.history.pushState(null, null, document.URL);});
}

此外，不要在 componentWillUnmount()删除监听事件，会失效。

如何在react中禁止浏览器后退相关推荐

如何在React中做到jQuery-free
前言前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
react 中渲染html_如何在React中识别和解决浪费的渲染
react 中渲染html by Nayeem Reza 通过Nayeem Reza 如何在React中识别和解决浪费的渲染 (How to identify and resolve wasted r ...
Html5禁止浏览器后退,多页面网站禁用浏览器后退键
如标题友,记基开前不接些前家我告对猿果水使钮控所说,本文提供的方法适用于多页面网站,如SPA单页面应朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随用等不适用. 利用w不的期是 ...
JS禁止浏览器后退键
背景说明: 今天项目测试中,同事发现一个Bug,当键盘敲下后退键(Backspace)后,浏览器自动后退,不符合需求,故建议禁止浏览器后退键. 提出需求: 当键盘敲下后退键(Backspace)后 1 ...
react网格生成_如何在React中构建实时可编辑数据网格
react网格生成 by Peter Mbanugo 彼得·姆巴努戈(Peter Mbanugo) 如何在React中构建实时可编辑数据网格 (How to Build a Real-time Edi ...
html中加入echarts,如何在react中使用echarts
如何在react中echarts 1.安装echarts包npm install echarts --save 2.react使用echartsconst echarts = require('ech ...
js禁止浏览器后退按钮
js禁止浏览器后退按钮 1.js //禁止浏览器后退按钮 function BanBack(ele) {//禁止浏览器后退按钮if (window.history && window. ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...

如何在react中禁止浏览器后退

如何在react中禁止浏览器后退相关推荐

最新文章

热门文章