以前项目使用 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. 爬虫实例——通过JS控制滚动条

    案例 某位淘女郎的某个相册 有能力的童鞋可以先尝试一下爬取每张照片的链接. 我曾经尝试过几种方法,下面一一介绍: 第一种方法,采用requests和BeautifulSoup: import requ ...

  2. Ubuntu 14.04 64bit下Caffe + Cuda6.5/Cuda7.0 安装配置教程

    http://www.embeddedlinux.org.cn/emb-linux/entry-level/201612/21-6005.html 随着深度学习快速发展的浪潮,许多有兴趣的工作者都转入 ...

  3. ACE反应器(Reactor)模式(4)

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/18/596012.html 定时器的实现 通过Reactor机制,还可以很容易的实现定时器的功 ...

  4. C#学习目录处理

    目录获取和处理: string path = ".";//表明要在当前所在的目录 //先定义目录信息变量 DirectoryInfo dir = new DirectoryInfo ...

  5. react+propTypes

    React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.Prop ...

  6. js实现游戏转盘抽奖

    <!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...

  7. ZooKeeper食谱(八)

    使用ZooKeeper构造高级别应用的指南 在这个文章中,你将会发现使用ZooKeeper来实现高级别功能的指南.所有的它们在客户端上被实现而不需要ZooKeeper特别的支持.希望社区将注意到这些约 ...

  8. 数据结构:Rope-区间翻转

    BZOJ1269 上一篇文章介绍了Rope的简单应用,这里多了一个操作,区间翻转 同时维护一正一反两个rope……反转即交换两个子串 下面给出代码: #include<cstdio> #i ...

  9. .NET中方法的注意事项 明细

    1. 方法中return 会终止整个方法段. 而break只能终止当前循环. 2. 方法就是一对可用代码的复用. a . 对于可重用的代码,在vs中选中,右键  重构  提取方法.即可自动封装成一个方 ...

  10. Linux while 和 read 的用法

    Reference: [ linux man doc ] [ CSDN roler_ ] [ Reads from the file descriptor] read 命令说明 SYNTAX : re ...