以前项目使用 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. BAT-Python面试题

    Python语言特性 1 Python的函数参数传递 看两个如下例子,分析运行结果: 代码一: a = 1 def fun(a): a = 2 fun(a) print(a) # 1 代码二: a = ...

  2. GYM 101875 2018 USP-ICMC

    3月自训 (1):10/12 A: 题意:每个人可以连边,最远连到第(i+k)%n个人,边权为这个人与另一个人连边距离,求生成一颗最大生成树的权值和是多少 题解:可以证明的是,我们每一个人都向接下来的 ...

  3. linux 命令后台运行（转载）

    原文连接:https://www.cnblogs.com/lwm-1988/archive/2011/08/20/2147299.html 有两种方式: 1. command & : 后台运行 ...

  4. annot refer to a non-final variable * inside an inner class defined in a different method"错误解析

    在使用Java局部内部类或者匿名内部类时,若该类调用了所在方法的局部变量,则该局部变量必须使用final关键字来修饰,否则将会出现编译错误“Cannot refer to a non-final va ...

  5. php中相关函数

    1.php标准风格 <?php //这是标准风格 echo '推荐标准风格'; ?> 2.php中文乱码 .html:<meta http-equiv="Content-T ...

  6. centos中mysql的安装

    一:前沿 过完年了,花了不少钱啊!本来还打算买电脑的了,结果这个事情还是的延期啊!苍天啊!刚刚也看了下,一台苹果也大概是1w左右!买吧!boy!别犹豫了吧!好吧现在来说说我自己的工作吧!现在过完年到公 ...

  7. HDU2031 进制转换

    #include <iostream> #include "string" #include "cstdio" #include "cst ...

  8. 2015/9/18 Python基础(14)：函数式编程

    这篇写了忘发.现在补上. Python不是也不大可能成为一种函数式的编程语言,但是它支持许多有价值的函数式编程语言构建.也有些表现的像函数式编程机制但是从传统上也不能认为是函数式编程语言的构建.Pyt ...

  9. kolakoski序列

                   搜狐笔试=.= 当时少想一个slow的指针..呜呜呜哇的一声哭出来 function kolakoski(token0, token1) { token0 = token ...

  10. 项目记录 -- zpool set

    zfs set <property=value> <filesystem|volume|snapshot> root@UA4300D-spa:~/hanhuakai/pro_0 ...