使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
来源:互联网 发布:java 手动编译web项目 编辑:程序博客网 时间:2024/06/05 15:10
做web页面, 无论你是使用Jquery, 还是使用React, 都会用到页面跳转功能, 当然谁都知道的方法是直接使用location跳转, 如下:
window.location.href="target_page"
但如果你使用 React + Redux 的话, 这样的跳转就相当于页面跳出, 会重新加载css/js, 而且前一个页面的状态(store里面存的state就清空为默认状态了)就没了, 这导致两个问题:
- 想要获取前一个页面的状态无法获取, 你可以通过跳转的url传递参数, 如: window.location.href="target_page?arg1=xxx&agr2=yyy"
- 按后退按键, 返回前一个页面, 那个页面也要重新加载css/js/数据
这显然不是我们想要的, 也就不是纯属的单页面应用了. 而且这也不是React官方推荐使用的方法
我上网找来找去, 有说用push, 但我没成功
this.props.history.push("/target_page") //报错: this.props.history is undefined
最后还是万能的stackoverflow找到了解决方法, 其实可以使用 react-router-dom 的Redirect功能, 优雅的实现页面跳转, 代码如下
import { Redirect } from 'react-router-dom';// ... your class implementationhandleOnClick = () => { // some action... // then redirect this.setState({redirect: true});}render() { if (this.state.redirect) { return <Redirect push to="/sample" />; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数 } return <button onClick={this.handleOnClick} type="button">Button</button>;}
或者这样写Redirect
<Redirect to={{ pathname: '/login', search: '?utm=your+face', state: { referrer: currentLocation }}}/>
使用上面的方法就可以简单方面的进行跳转了, 而且全局store状态还维持着不会改变, 下一个页面也不会重新加载/css/js, 才这是真正的单页面应用嘛!!!!!
参考:
https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link
https://reacttraining.com/react-router/web/api/Redirect
阅读全文
0 0
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- react-router 路由控制页面跳转
- React-Router传参取值页面跳转
- react +webpack+express router实现登录与页面跳转
- 使用 vue-router 跳转页面
- 使用vue-router页面跳转
- reactjs router 4 (react-router-dom)使用嵌套路由遇到的问题
- React Native Navigator 的路由以及页面跳转
- react入门之路由----react-router的跳转问题
- react-router打包后打开路由页面空白
- React-Router 4.2 的嵌套路由实现
- react-router v4 使用 history 控制路由跳转
- Swift Router 页面跳转路由,组件解耦
- vue-router跳转页面
- vue-router跳转页面
- react-router 4.2.0<link>页面跳转-传参与不传参
- ReactJS与antdDesign中页面跳转问题(React Router)
- React Native 页面跳转react-navigation导航器的使用
- 云端车牌识别软件简介
- 牛客网-DNA最长片段
- simplejson之JSON转化为对象-yellowcong
- 11
- RecyclerView的使用
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- 算法系列之--Javascript和Kotlin的插入算法(原)
- strstr的用法
- 碰瓷碰出新高度?团伙作案有预谋,一言不合就碰你,还有这种操作?
- Oracle基础教程-第十章 安全管理
- 层次查询、行列转换学习笔记
- 删除和恢复 一起写在一个JS方法中
- 项目如何引入GreenDao3.2的记录
- Redis入门操作笔记