以前项目使用 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 页面离开 提示数据变更的更多相关文章

  1. React Router页面传值的三种方法

    文章地址:https://blog.csdn.net/qq_23158083/article/details/68488831

  2. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  3. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  4. 原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求 ，页面离开的操作

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

  5. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  6. 对于vue和react“页面间”传递数据的理解误区

    前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...

  7. 使用vue的mixins混入实现对正在编辑的页面离开时提示

    mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...

  8. React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

    做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setSta ...

  9. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

随机推荐

  1. 使用snmp4j实现Snmp功能（二）

    相关链接:Snmp学习笔记使用snmp4j实现Snmp功能(一)使用snmp4j实现Snmp功能(二)使用snmp4j实现Snmp功能(三) 前一篇文章讲了如何用snmp4j实现set和get的功能, ...

  2. LruCache：从网络加载图片缓存实例

    OOM异常 堆内存用于存储实例对象,当程序不断创建对象,并且对象都有引用指向,那么垃圾回收机制就不会清理这些对象,当对象多到挤满堆内存的上限后,就产生OOM异常.Android系统为每个应用程序使用的 ...

  3. Java并发编程学习笔记

    Java编程思想,并发编程学习笔记. 一.基本的线程机制 1.定义任务:Runnable接口 线程可以驱动任务,因此需要一种描述任务的方式,这可以由Runnable接口来提供.要想定义任务,只需实现R ...

  4. python练习：抓取统计log内ip数量

    #!/usr/bin/python #-*- coding: utf- -*- import os import re rawfile = '/var/log/auth.log' def rawpar ...

  5. mongo在centos与windows上部署与配置,及远程连接mongo与数据用户和角色分配

    1.下载mongodb社区版: windows 安装包安装: https://www.mongodb.com/download-center#community(mongo下载中心) 配置环境变量 控 ...

  6. Cppcheck代码分析下

    1.流解析 解析函数中的可能的代码执行流, 函数实际执行中只会执行代码流中的一条流 分析: 分支语句 if-else ,switch-case         循环语句 while, do-while ...

  7. py_faster_rcnn识别出来的结果好多红框重叠

    py_faster_rcnn识别出来的结果好多红框重叠, 可以通过调节demo.py中的NMS_THRESH的值进行限制. NMS_THRESH表示非极大值抑制,这个值越小表示要求的红框重叠度越小,0 ...

  8. 基于html5的动画库，非svg和canvas

    基于html5的动画库,非svg和canvas https://greensock.com/docs/#/HTML5/GSAP/TweenLite/

  9. [uva11806]容斥定理

    n*m的矩形 k个人 第一行,最后一行,第一列,最后一列都至少站有一个人 小水题 正着做不好做,要反着想,那就容斥定理,ABCD四种情况分别是那四个行列分别没有人. #include<cstdi ...

  10. auto-keras 测试保存导入模型

    # coding:utf-8 import time import matplotlib.pyplot as plt from autokeras import ImageClassifier# 保存 ...