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 ...
随机推荐
- 爬虫实例——通过JS控制滚动条
案例 某位淘女郎的某个相册 有能力的童鞋可以先尝试一下爬取每张照片的链接. 我曾经尝试过几种方法,下面一一介绍: 第一种方法,采用requests和BeautifulSoup: import requ ...
- Ubuntu 14.04 64bit下Caffe + Cuda6.5/Cuda7.0 安装配置教程
http://www.embeddedlinux.org.cn/emb-linux/entry-level/201612/21-6005.html 随着深度学习快速发展的浪潮,许多有兴趣的工作者都转入 ...
- ACE反应器(Reactor)模式(4)
转载于:http://www.cnblogs.com/TianFang/archive/2006/12/18/596012.html 定时器的实现 通过Reactor机制,还可以很容易的实现定时器的功 ...
- C#学习目录处理
目录获取和处理: string path = ".";//表明要在当前所在的目录 //先定义目录信息变量 DirectoryInfo dir = new DirectoryInfo ...
- react+propTypes
React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.Prop ...
- js实现游戏转盘抽奖
<!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...
- ZooKeeper食谱(八)
使用ZooKeeper构造高级别应用的指南 在这个文章中,你将会发现使用ZooKeeper来实现高级别功能的指南.所有的它们在客户端上被实现而不需要ZooKeeper特别的支持.希望社区将注意到这些约 ...
- 数据结构:Rope-区间翻转
BZOJ1269 上一篇文章介绍了Rope的简单应用,这里多了一个操作,区间翻转 同时维护一正一反两个rope……反转即交换两个子串 下面给出代码: #include<cstdio> #i ...
- .NET中方法的注意事项 明细
1. 方法中return 会终止整个方法段. 而break只能终止当前循环. 2. 方法就是一对可用代码的复用. a . 对于可重用的代码,在vs中选中,右键 重构 提取方法.即可自动封装成一个方 ...
- Linux while 和 read 的用法
Reference: [ linux man doc ] [ CSDN roler_ ] [ Reads from the file descriptor] read 命令说明 SYNTAX : re ...