react-router 页面离开 提示数据变更
以前项目使用 react-router2.0, 业务层面页面离开的时候需要弹出自己的弹出框,根据用户的操作,进行是否可以离开
试了几种方式都存在问题,实现的并不完美,没办法对用户点击浏览器后退支持的很好,除非是显示系统默认的confirm,同步处理
1.setRouteLeaveHook
setRouteLeaveHook没有callback机制,只能是修改了变化标志位,再push一遍,但是这个在实际情况也是有问题的,因为history就一直是push了,跟用户点后退不是一个交互了
2.onChange处理, onChange可以在成功的时候,调用callback,但是用户点击浏览器后退的话,其实是没有回调触发的,不跳转的情况下,没办法恢复url
其他情况下 页面url不变化,
a.可能是页面跳转,没有使用hashHistory进行操作,直接操作了原生的location.history对象
b.页面刷新了测试,hashHistory对象length = 1,没有地址可以回退
网上还有自己创建history的方式,项目中没有尝试,项目升级到react-router4.0的时候解决了问题,解决方式其实上一篇中已经写明了。
1.getUserConfirmation,在 自己创建history 或者定义 HashRouter 的时候,设置确认弹出框,通过callback异步处理
2.页面离开通过,路由变化的时候的提示功能 Prompt 组件 https://reacttraining.com/react-router/core/api/Prompt 实现
message也可以是方式,这个看实际项目需求
3.操作history,需要使用路由的histroy对象,使用路由的组件和方法跳转,不要和原生的location.history串用
react-router 页面离开 提示数据变更的更多相关文章
- React Router页面传值的三种方法
文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- 对于vue和react“页面间”传递数据的理解误区
前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...
- 使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...
- React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法
做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setSta ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
随机推荐
- Educational Codeforces Round 48 (Rated for Div. 2) CD题解
Educational Codeforces Round 48 (Rated for Div. 2) C. Vasya And The Mushrooms 题目链接:https://codeforce ...
- git备份脚本
#!/bin/bash BASEDIR=/home/git/gitlab DESTDIR=/home/silence/backups/gitlab SRCDIR=$BASEDIR/tmp/backup ...
- 题解 【luogu P2680 NOIp提高组2015 运输计划】
题目链接 题解 题意 一棵树上有\(m\)条路径,可以将其中一条边的权值改为0,问最长的路径最短是多少 分析 最短的路径最长自然想到二分最长路径,设其为\(dis\) 关键在于如何check chec ...
- bzoj 1006 [HNOI2008]神奇的国度 弦图+完美消除序列+最大势算法
[HNOI2008]神奇的国度 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 4370 Solved: 2041[Submit][Status][D ...
- OpecnCV训练分类器详细整理
本文主要是对下面网址博客中内容的实例操作: http://blog.csdn.net/byxdaz/article/details/4907211 在上述博客中,详细的讲述了OpenCV训练分类器的做 ...
- POJ 1661 DP
Help Jimmy Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11071 Accepted: 3607 Descr ...
- zigbee ------ JN5169低功耗设置
低功耗睡眠设置Power Manager (PWRM) PWRM_vInit() 如果进入睡眠模式,设置芯片进入何种睡眠模式 PWRM_eScheduleActivity()设置进入睡眠多长时间(时钟 ...
- FreeRTOS - 定时器使用注意
1.只有进入定时器守护任务,从定时器命令队列取出命令,队列空间才会空出一个可用空间:所有定时器公用一个定时器队列 2.如果使用软件定时器,在调度器开始前,会自动创建一个定时器守护任务,configTI ...
- python读书笔记-《A Byte of Python》中文第三版后半部分
编辑器:windows,linux 不要用notepad,缩进糟糕 -------------- 5.18缩进 同一层次的语句必须有相同的缩进.每一组这样的语句称为一个块. i = 5 2 prin ...
- 【uva11987】带删除的并查集
题意:初始有N个集合,分别为 1 ,2 ,3 .....n.有三种操件1 p q 合并元素p和q的集合2 p q 把p元素移到q集合中3 p 输出p元素集合的个数及全部元素的和. 题解: 并查集.只是 ...