react-router 页面离开 url错误

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

时间： 2024-08-04 18:17:11

react-router 页面离开 url错误的相关文章

React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件. 解决办法特别简单,在离开页面时的周期函数(componentWillUnmount)中: //组件将被卸载 componentWillUnmount(){ //重写组件的setState方法,直接返回空 this.setState = (state,callback)=>{

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

关于react router 4 的小实践

详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react-app搭建: 首先需要安装好create-react-app npm install -g create-react-app 安装完毕之后就是搭建项目: create-react-app your-project-name cd your-project-name npm start 安装完成之后

react router路由传参

今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下. 1.通配符传参 Route定义方式: <Route path='/path/:name' component={Path}/> Link组件: <Link to="/path/通过通配符传参">通配符</Link> 参数获取: th

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

多域名环境，页面获取url的一种方案

因为系统是分布式部署的.而且有多个域名,所以常常涉及到获取url的问题. 这是系统框架层面须要提供的能力.否则每一个模块都须要自己去想办法获取ip,就会非常混乱.上线也easy发生bug 主要须要解决几个问题: 1.可以自己主动区分开发环境和生产环境.比方部署上线.url可能是http://www.xxx.com/svc/hello,而在本地开发的时候应该是http://127.0.0.1/svc/hello.而不能写死,否则开发和部署就要换来换去.非常麻烦 2.可以依据不同的服务.区分URL.