以前项目使用 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. Educational Codeforces Round 48 (Rated for Div. 2) CD题解

    Educational Codeforces Round 48 (Rated for Div. 2) C. Vasya And The Mushrooms 题目链接:https://codeforce ...

  2. git备份脚本

    #!/bin/bash BASEDIR=/home/git/gitlab DESTDIR=/home/silence/backups/gitlab SRCDIR=$BASEDIR/tmp/backup ...

  3. 题解 【luogu P2680 NOIp提高组2015 运输计划】

    题目链接 题解 题意 一棵树上有\(m\)条路径,可以将其中一条边的权值改为0,问最长的路径最短是多少 分析 最短的路径最长自然想到二分最长路径,设其为\(dis\) 关键在于如何check chec ...

  4. bzoj 1006 [HNOI2008]神奇的国度 弦图+完美消除序列+最大势算法

    [HNOI2008]神奇的国度 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 4370  Solved: 2041[Submit][Status][D ...

  5. OpecnCV训练分类器详细整理

    本文主要是对下面网址博客中内容的实例操作: http://blog.csdn.net/byxdaz/article/details/4907211 在上述博客中,详细的讲述了OpenCV训练分类器的做 ...

  6. POJ 1661 DP

    Help Jimmy Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 11071   Accepted: 3607 Descr ...

  7. zigbee ------ JN5169低功耗设置

    低功耗睡眠设置Power Manager (PWRM) PWRM_vInit() 如果进入睡眠模式,设置芯片进入何种睡眠模式 PWRM_eScheduleActivity()设置进入睡眠多长时间(时钟 ...

  8. FreeRTOS - 定时器使用注意

    1.只有进入定时器守护任务,从定时器命令队列取出命令,队列空间才会空出一个可用空间:所有定时器公用一个定时器队列 2.如果使用软件定时器,在调度器开始前,会自动创建一个定时器守护任务,configTI ...

  9. python读书笔记-《A Byte of Python》中文第三版后半部分

    编辑器:windows,linux 不要用notepad,缩进糟糕 -------------- 5.18缩进 同一层次的语句必须有相同的缩进.每一组这样的语句称为一个块. i = 5 2  prin ...

  10. 【uva11987】带删除的并查集

    题意:初始有N个集合,分别为 1 ,2 ,3 .....n.有三种操件1 p q 合并元素p和q的集合2 p q 把p元素移到q集合中3 p 输出p元素集合的个数及全部元素的和. 题解: 并查集.只是 ...