react-router 页面离开 提示数据变更

以前项目使用 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串用

转载于:https://www.cnblogs.com/legu/p/7091443.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言系列文章之#和##

很久就知道了 # 和 ## ,但是都没怎么使用,直到最近的项目涉及到需要编写大量相似的代码之后才决定尝试使用 ## 去简化代码的书写。比如说我的项目需要控制四个通道的电机,四个通道的逻辑控制代码都是类似的,只是对应的硬件和数据信…

springboot 上传文件_基于SpringBoot的文件上传

在实际的企业开发中,文件上传是最常见的功能之一,SpringBoot集成了SpringMVC常用的功能,当然也包含了文件上传的功能,实现起来没有太多的区别。下面我们来讲解一下,使用SpringBoot如何实现多个文件上传操作。使用的环境…

Linux的 i2c 驱动框架分析

1.基本概念总线设备驱动模型,是Linux 内核的一个基础,基本理论可以说按照大企业的分工原则,每个人只要负责自己的事情,向其他部门给出标准的接口调用,后勤部就负责后勤工作,厨房有可能跟后勤部产生工作上的…

matlab fftshift_数字信号处理没有Matlab?用Python一样很爽

通常,在数字信号处理时,我们避不开matlab这个工具,因其它的强大的功能受到广大工程师的好评,也一直都是业界的不二之选。但是,matlab毕竟是商业软件,公司里如果使用的话,就需要支付高昂的费用。…

栈,C语言实现

什么是数据结构?数据结构是什么?要了解数据结构,我们要先明白数据和结构,数据就是一些int char 这样的变量,这些就是数据,如果你是一个篮球爱好者,那么你的球鞋就是你的数据,结构就是…

Camera摄像头工作原理

回想这工作的这几年,尝尽社会的辛酸艰难,从一开始什么都没有到30万,从30万到200万,从200万到1300万,不是炫耀,我只是想通过我自己的经历告诉我的朋友们「手机像素越高,拍的照片越清晰」摄像头结…

es6一维数组转二维数组_技术图文:Numpy 一维数组 VS. Pandas Series

背景Numpy 提供的最重要的数据结构是 ndarray,它是 Python 中 list 的扩展。Pandas 提供了两种非常重要的数据结构 Series和DataFrame。Numpy 中的一维数组与 Series 相似,一维数组只是提供了从0开始与位置有关的索引,而Series除了位置索引之…

unity UI事件

由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_sourcetuicool&utm_mediumreferral,并对相关问题进行解释。 我们最常用到的就是unity的button组件,…

电子工程学院的师兄弟姐们们,老师叫你们回家

昨天写了很长的文章,接收到推送的同学们应该也会很开心,但是由于我的原因,需要把文章删除「你们能想到的原因肯定不是我删文的原因」,但是呢,也因为这样,又可以重写一篇,刚好可以多加点内容。后…

auto.js停止所有线程_Java多线程编程基础知识 概念介绍,以及线程状态

一、进程进程是操作系统结构的基础;是一次程序的执行;是一个程序及其数据在处理机上顺序执行时所发生的活动。操作系统中,几乎所有运行中的任务对应一条进程(Process)。一个程序进入内存运行,即变成一个进程。进程是处于运行过程中…

Linux 进程管理数据结构

文末集赞留言抽奖,我会选出留言点赞数前 3 名送出小米耳机。别刷赞啊,刷赞被举报无效,相信真的是公众号粉丝的读者,不会做这样的行为,刷赞指的是购买外挂刷,如果是转发到朋友圈和微信群的,不算刷…

如何安装python3.8_python3.8下载及安装步骤详解

1.操作系统:Windows7 64bit executable installer 2.安装步骤: 双击安装文件python-3.8.0-amd64.exe 勾选下方“Add Python 3.8 to PATH”,并选择“Customize installation”3.把Optional Features全部勾选上,点击“Next"4.A…

队列,C语言实现

什么是队列?上一篇文章写了什么是栈,用C语言实现了栈,既然说了栈,不说队列,感觉总是少了点什么,所以就顺手写一个队列,而且最近做项目也用到这个队列的代码。栈的特点是先进后出,队列…

华为hr,我尽力了

最近,一则新闻很火但是突然,又不火了,火于不火之间,时间有点短,其中猜测很大部分是gongguan原因以下为正文截图~以上为事件原文,这个是一个热点新闻,之前发了一个热点新闻,瞬间就火爆…

idea,eclipse创建多模块项目

新建一个maven项目 iead,新建是不选择archetype,新建好之后,pom中的 <packaging>pom</packaging>节点是默认的,如果不是要改成这这样子 然后选中这个项目,新建一个module,之后就和建立普通项目一样了. eclipse 是这样的 建一个普通的maven项目就可以了 这个是建好之…

python画图程序代码_少儿python编程(7)海龟画图(拓展1)

我们继续用Python的海龟库来画图吧&#xff01;上图是画一朵花的程序&#xff0c;重点是6-12行&#xff0c;使用了函数来定义drawleaf:每一掰叶子由两条弧线组成&#xff0c;每一条弧线重复画15次&#xff0c;每次前进5步&#xff0c;右转6度。看图形化代码就很清楚了&#xff…

opencv matlab三维点云,点云采样的三种方法 - 小白学视觉的个人空间 - OSCHINA - 中文开源技术交流社区...

点击上方“小白学视觉”&#xff0c;选择“星标”公众号重磅干货&#xff0c;第一时间送达编辑&#xff1a;3D视觉工坊本文由知乎作者GeometryHub授权转载&#xff0c;不得擅自二次转载。原文链接&#xff1a;https://zhuanlan.zhihu.com/p/86044055点云采样分类点云采样的方法…

C语言数组越界导致无限循环

大奖也是你们的&#xff0c;感谢支持&#xff0c;不喜欢的请轻拍。过年抽奖我还是很期待的&#xff0c;每年公司的年会抽奖的时候&#xff0c;我总是能小中一把&#xff0c;有一年我还中了个一等奖&#xff0c;不知道大家对一等奖什么概念&#xff0c;中一等奖的概率非常低&…

七月流水账

7.1-7.3 >< 7.4 看了一会儿李老大给的Caffe的教程 重配python qt vtk&#xff0c;大概是原来装了一个xxx&#xff08;忘记名字&#xff09;&#xff0c;然后位数有些不对&#xff0c;搞了好一阵 果然还是卸载重装好>< 然后又看了会儿Matlab神经网络工具箱怎么用 …

python绘制拟合回归散点图_机器学习之利用Python进行简单线性回归分析

前言&#xff1a;在利用机器学习方法进行数据分析时经常要了解变量的相关性&#xff0c;有时还需要对变量进行回归分析。本文首先对人工智能/机器学习/深度学习、相关分析/因果分析/回归分析等易混淆的概念进行区分&#xff0c;最后结合案例介绍如何利用Python进行简单线性回归…