以前项目使用 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. Codeforces Round #331 (Div. 2) B. Wilbur and Array

    B. Wilbur and Array time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. 使用springcloud的feign调用服务时出现的错误：关于实体转换成json错误的介绍

    http://blog.csdn.net/java_huashan/article/details/46428971 原因:实体中没有添加无参的构造函数 fastjson的解释: http://www ...

  3. logrotate配置和使用

    logrotate是linux自带的日志管理工具.服务器如果不对日志进行滚动操作,单个日志文件的增长速度极快,不利于日志查找和问题定位.而logrotate能够自动完成日志的截断.压缩和滚动操作. 安 ...

  4. 旋转 3d

    建议chorme浏览器浏览,有样式兼容性问题. 图片可以根据自己本地路径设置路径,js库引用jquery. 写的不好,多多建议,谢谢大家. <html onselectstart="r ...

  5. shell脚本实现轮询查看进程是否结束

    功能需求: 一个shell脚本,为了使用多进程,启动十几个后台运行的程序,为了防止脚本比后台进程提前结束造成不可预估的影响,现要判断是否多个后台执行的已知进程已经结束,并在所有进程结束后做出相应操作. ...

  6. Linux之防火墙与端口

    1.关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放.下面是命令实现: iptables -P INPUT DROPiptables -P FORWARD DROPiptable ...

  7. Linux powercli 以及connect-viserver 连接问题

    1. 参考文档 http://fdo-workspace.blogspot.hk/2017/07/powershell-powercli-for-linux-server.html 2. powers ...

  8. MySQL按天，按周，按月，按时间段统计

    MYSQL函数:DATE_FORMAT 例子: select DATE_FORMAT(create_time,'%Y%m%d') days,count(caseid) count from tc_ca ...

  9. Achain 钱包部署

    官网 GIT: [ Achain_linux ] 基础环境 OS: CentOS, Ubuntu Achain: 官网 [ release 最新版本 ] 安装 Achain 钱包 下载 CentOS ...

  10. Creating a new dynamic form project, business modeling.

    The domain logic is like there are a bunch of objects, as well as a lot of configurations, according ...