以前项目使用 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. OLTP与OLAP比较【转】

    OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...

  2. Ubuntu中python多版本管理工具-pyenv

    ubuntu系统版本:16.04 # lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: Ubu ...

  3. 使用snmp4j实现Snmp功能（三）

    相关链接:Snmp学习笔记使用snmp4j实现Snmp功能(一)使用snmp4j实现Snmp功能(二)使用snmp4j实现Snmp功能(三) 前两篇文章讲了如何使用Snmp4j实现Set.Get(使用 ...

  4. C#或ASP.NET绘图初探

    C#或ASP.NET的简单绘图 public void ProcessRequest (HttpContext context) { context.Response.ContentType = &q ...

  5. C#学习之泛型继承和静态成员

    想要理解这里有必要先将泛型类学习充分.这里讲解的是泛型类继承类的类型和静态成员. 在前面C#学习之泛型中,创建的LinkList<T>类实现了IEnumerable<T>接口. ...

  6. PHP 数据加密

    <?php /** * * 加密 * */ function lock_url($txt, $key = "aiteng") { $chars = "ABCDEFG ...

  7. Ubuntu 15.04 编译UE4 for Linux版

    源 起 Unreal Engine 4 是全球最先进的Realtime Illumination & Physical 引擎: 长期以来,UE4都只有Windows版和Mac版,今年终于向Li ...

  8. jenkins Process leaked file descriptors

    https://stackoverflow.com/questions/17024441/process-leaked-file-descriptors-error-on-jenkins 1. BUI ...

  9. 【vijos】P1659 河蟹王国

    [算法]线段树 [题解]区间加上同一个数+区间查询最大值.注意和谐值可以是负数,初始化ans为负无穷大. #include<cstdio> #include<algorithm> ...

  10. UIView显示时遮挡导航栏的方法

    [self.navigationController.view:addSubview];