以前项目使用 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. 如何使用impdp导入oracle数据库文件

    1.首先,安装好oracle数据库. 2.使用sqlplus进入sysdba权限,sqlplus "/as sysdba", 例如: 3.创建用户framework,例如: CRE ...

  2. STL之五：set/multiset用法详解

    集合 转载于:http://blog.csdn.net/longshengguoji/article/details/8546286 使用set或multiset之前,必须加入头文件<set&g ...

  3. DOM基本代码二

    ------------------------------- <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  4. eclipse好玩的插件集（一） CKEditor插件

    啥也不说,先上效果图: 当你输入完图片的url时,你可以得到预览的图像,从而进行宽高调整! 使用方法: 在eclipse市场中搜索ckeditor 配置操作如下:   进行文件关联,这样就可以直接用c ...

  5. Log4J使用实例---日志进行邮件发送或是存入数据库

    部分转摘:http://blog.csdn.net/azhao_dn/article/details/9118667 1.根类别(在类别层次结构的顶部,即全局性的日志级别) 配置根Logger,其语法 ...

  6. 【c#】winform 上传图片

    1.拖拽上传图片 1.1.后台代码中修改窗体属性,添加 AllowDrop = true 1.2.给窗体添加拖拽事件,在事件列表找到拖拽 双击即可: 在 DragDrop 生成的方法中添加代码如下: ...

  7. ListView - SimpleAdapter 行间颜色交替(转)

    一.概述 通过扩展SimpleAdapter,来改变显示外观.因为要每行的显示颜色,首先要获得每行的View实例,然后调用setBackgroundColor函数设置. 二.实例 [效果] [代码片段 ...

  8. 九度OJ 1535 重叠的最长子串

    重叠的最长子串 http://ac.jobdu.com/problem.php?pid=1535 时间限制:1 秒 内存限制:128 兆 题目描述: 给定两个字符串,求它们前后重叠的最长子串的长度,比 ...

  9. LightOJ 1340 - Story of Tomisu Ghost 阶乘分解素因子

    http://www.lightoj.com/volume_showproblem.php?problem=1340 题意:问n!在b进制下至少有t个后缀零,求最大的b. 思路:很容易想到一个数通过分 ...

  10. c# bootstrap-table 知识

    bootstrap-table 提供手机端,电脑端访问,提供分页,筛选等. bootstrap-table说明文档:http://bootstrap-table.wenzhixin.net.cn/zh ...