React中禁用浏览器退回功能

已于 2022-02-10 09:20:19 修改
阅读量2.5k 收藏 1
点赞数 2
分类专栏： javascript React 文章标签： javascript react.js 前端
于 2022-02-08 10:59:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35176319/article/details/122819696
版权

禁用浏览器退回功能

React项目在一个页面上使用了ant-design的抽屉组件，并专用一个变量 medicalVisible:boolean 控制其是否可见，样子如图：点击右边的返回会通过将关闭抽屉，但是点击浏览器自带的返回按钮，就会造成路由回退，并且重新进入抽屉所在的页面，会直接展示抽屉（因为medicalVisible仍然为true）
在这里插入图片描述
所以这个时候我需要修改浏览器自带的回退按钮功能，让它的功能表现符合我的预期，（问了度娘回来后，就得到一个好方法 👀），具体如下图，我多加了一句「medicalStore.setMedicalVisible(false)」，是为了让这个操作只关闭抽屉而不会直接返回上一个路由
在这里插入图片描述
完美收工，感谢踩过这个坑的仙人指路 🙏
——————————————————————————————————————————
不对劲啊兄弟们，此情此景。。。我翻车了，以上解决方案造成了一个问题，1、我莫法remove掉这个监听；2、由于我用useEffect来控制其是否监听，用的依赖是medicalVisible（true的时候就监听，false的时候就remove掉，前面说了remove不成功），然后在正常启用监听后，在其他页面，浏览器回退按钮，它也不能用

所以，最后找到了react-router自带的组件解决了：<Prompt />，给message返回true就是允许离开这个页面组件，返回false就会停留在当前组件，所以我这里在检测到抽屉式开启状态就返回false，只手动把抽屉关闭
在这里插入图片描述
看看官网的描述与例子：
在这里插入图片描述

啪了个猫
关注
专栏目录
Vue3 - 详解报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘writeText‘)，vuejs剪贴板出错
王佳斌
07-10 3068
剪贴板报错，navigator.clipboard，writeText，突然就报错了，浏览器禁用了非安全域的navigator.clipboard对象，解决报错，Cannot read properties of undefined (reading 'writeText')，复制，粘贴，vue3，vue2，nuxt2，nuxt3，react，javascript，typescript，报错，document，复制后报错，用户粘贴报错，出错，浏览器控制台报错，详细教程，解决不了，还是不行，部署到线上环境就报
如何禁止浏览器使用后退按钮功能
10-25
浏览器的后退按钮使得我们能够方便地返回以前访问过的页面，它无疑非常有用。但有时候我们不得不关闭这个功能，以防止用户打乱预定的页面访问次序。
react禁用浏览器的回退功能
Hero_孙的博客
06-10 2317
componentDidMount() { window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); }
js怎样控制浏览器前进、后退、页面跳转
最新发布
z16638522031的博客
08-04 325
/ 跳转到新的URL地址，并替换当前历史记录。这些方法可以让我们通过JavaScript来控制浏览器的前进、后退和页面跳转，从而实现更加灵活的页面交互效果。2.页面跳转：可以使用location对象的href属性来访问新的URL地址，从而进行页面跳转。
react中使用定时器监控返回
bulucc的博客
03-16 399
react中使用定时器监控返回
react阻止用户通过浏览器的后退按钮离开当前页面&阻止浏览器后退。
niconicon____的博客
09-27 929
让用户无法通过点击后退按钮来离开当前页面，react阻止用户通过浏览器的后退按钮离开当前页面，web阻止浏览器后退。
如何在react中禁止浏览器后退
qq_38980678的博客
12-14 3649
本人公司项目，业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。 首先，想到了监听鼠标事件，鼠标监听事件包括以下几种： click：单击事件。 dblclick：双击事件。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：鼠标移动事件。 mouseover(mouseenter)：移入事件。 mouseout(mouseleave)：移出事件。 contextmenu：右键事件 上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键
js禁止浏览器的回退事件
12-02
直接来个终极方案： 查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。 [removed] //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); [removed] 现在，我们项目中就使用了这种方式。在常用浏览器中，都可以禁用了后退。 具体
酒浓码浓 - React事件阻止浏览器默认行为/冒泡
酒浓码浓
02-09 5998
React事件行为 React中无法用return false去阻止事件的默认响应行为 必须用 event.preventDefault();阻止浏览器默认行为， 例如标签不跳转 注： IE不认，在IE下需要用window.event.returnValue= false; event.stopPropagation();阻止冒泡； 例如上级点击事件不生效 不是你想要的答案，也...
禁用浏览器回退功能
weixin_48682320的博客
08-17 978
禁用浏览器回退功能
基于SpringBoot + MyBatis的前后端分离实现在线办公系统
web15185420056的博客
06-21 184
本项目目的是实现中小型企业的在线办公系统，云E办在线办公系统是一个用来管理日常的办公事务的一个系统使用SpringSecurity做安全认证及权限管理，Redis做缓存，RabbitMq做邮件的发送，使用EasyPOI实现对员工数据的导入和导出,使用WebSocket做在线聊天使用验证码登录页面展示：//用户名的key private static final String CLAIM_KEY_USERNAME=“sub”; //签名的时间 private static final String CLAIM
Vue简单快速上手 idea版
wifi是只狗
11-28 1526
文章目录
前端面试题知识点总结（仅供参考）
jiang16608544720的博客
03-14 1814
以下是本人面试后总结出来的面试知识点： 1.1. 模块化 \1. ES6 \2. Commonjs 1.2. 构建工具 \1. Webpack核心思想：模块化打包 \2. Webpack基本配置: entry, output, module&rules, plugins, devServer, devtool, resolve \3. 打包各种资源: JS / CSS/img/html/… \4. 加分项: 自定义webpack打包环境, Webpa
前端框架-Vue
AyinMars的博客
03-25 6301
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
单页面网站禁用浏览器后退键
weixin_34144450的博客
02-24 426
该文章适用于angularjs创建的单页面应用SPA，如vuejs或react.js不在本文讨论范围内。 我用angularjs和sb-admin2实现了前端框架，在不考虑浏览器后退键的情况下，是用$state和$stateParams实现后退功能的，当然也可以自己创建全局单例或是localstroge、sessionstorge处理历史...
js阻止页面回退
m0_74359467的博客
10-28 697
这里我再给大家提供一个思路：登录后，基本都会在本地存值里存储登录成功后接口返回的数据，那么我们可以在登录页面进行一个判断，本地存值是否有这个值，或者是未定义，当没有时，正常进行程序；有这个值时，直接跳转至首页，那么当用户在首页时点击回退，页面会回到登录页面，但是在登录页面直接进行了一个判断，就又跳回到首页，这也是一种方法。要在 JavaScript 中阻止页面回退，你可以使用 history.pushState() 方法，它可以修改浏览器历史记录中的当前状态，从而阻止页面回退。
禁用浏览器使用后退按钮
ooblack的博客
05-29 292
禁用浏览器使用后退按钮 <script type='text/javascript'> window.history.forward();//禁用页面后退 </script>
浏览器回退拦截,拦截/处理React-router中的浏览器后退按钮？
weixin_34138397的博客
12-21 1072
I'm using Material-ui's Tabs, which are controlled and I'm using them for (React-router) Links like this:}/>} />} />If I'm currenlty visting dashboard/data and I click browser's back buttonI ...
React-router（10）登录拦截
qq20004604的博客
03-04 7920
10、登录拦截 DEMO地址 参考 8.needLogin.js 登录拦截说起来比较高大上，其实很简单。 需要组件： 登录功能组件； 受保护组件（需要登录后才能访问）； 受保护组件的父组件（可选，如果 1 和 2 不是同一个路径，则需要，否则可以不需要）（用于进入受保护组件之前，检查登录信息，不符合要求则跳转到登录组件）； 逻辑：（有父组件，登录和受保护组件不是同一个路径）...
React 实现浏览器自带搜索功能高亮
05-25
在 React 中实现浏览器自带搜索功能高亮，可以使用 JavaScript 的 `window.find()` 方法来进行查找，并使用 `Selection` API 来高亮匹配的文本。以下是一个实现示例： ```jsx import React, { useState, useEffect } from "react"; const SearchHighlight = () => { const [searchText, setSearchText] = useState(""); useEffect(() => { const handleSearch = () => { const selection = window.getSelection(); if (selection.rangeCount) { const range = selection.getRangeAt(0); const searchRange = range.cloneRange(); searchRange.selectNodeContents(document.body); const searchResult = searchRange.toString().indexOf(searchText); if (searchResult !== -1) { selection.removeAllRanges(); range.setStart(searchRange.startContainer, searchResult); range.setEnd( searchRange.startContainer, searchResult + searchText.length ); selection.addRange(range); } } }; window.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "f") { e.preventDefault(); setSearchText(""); setTimeout(() => { const searchInput = document.getElementById("search-input"); searchInput.focus(); searchInput.select(); }, 0); } }); window.addEventListener("mouseup", handleSearch); return () => { window.removeEventListener("keydown", handleSearch); window.removeEventListener("mouseup", handleSearch); }; }, [searchText]); return ( <div> <input type="text" id="search-input" value={searchText} onChange={(e) => setSearchText(e.target.value)} /> </div> ); }; export default SearchHighlight; ``` 在上面的代码中，我们监听了 `keydown` 和 `mouseup` 事件，当用户按下 `Ctrl+f` 快捷键时，会弹出浏览器自带的搜索框，并且清空搜索文本框中的内容。当用户选中了文本后，会触发 `mouseup` 事件，我们就可以使用 `window.getSelection()` 方法获取选中的文本对象，然后使用 `Selection` API 对选中的文本进行高亮处理。 需要注意的是，上面的代码只是一个简单的示例，还有很多细节需要处理，例如当用户取消搜索后需要清除高亮等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值