React中禁用浏览器退回功能

禁用浏览器退回功能

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，只手动把抽屉关闭

看看官网的描述与例子：