react-router4.2使用js控制路由跳转的3种方式
查看前端面试题小程序 大量面试题和答案,请微信
一、背景
在很多情况下,我们需要用js来控制页面的路由切换,而不是通过Link标签这种方式,比如有这样一个场景,用户要登陆一个网站才能看到网站里面的内容,登录接口是一个独立的子页面,登陆成功后,才能进入网站浏览相关内容,使用react做SPA时就需要做路由的切换。
二、react-router4.2
在网上随处可见react-router入门使用方式,通过链接绑定组件实现跳转,或者绑定hashHistory后,妄想在子组件中使用this.props.history.push(’/某路径’)实现路由跳转,诚然,在以前的版本是可行的,据说,反正我没用过。而奇葩的4.2版本并不支持这种方式。我在网上看了许久,试了诸多办法,任然无法通过上述方式实现js控制路由切换,emmm…
三、问题解决办法
使用4.2里面的Redirect标签?组件?,不知道怎么称呼
具体如下:
先定义路由(表):
import {
BrowserRouter as Router,
Route,
Switch
} from ‘react-router-dom’;
<div style={{height:‘100%’}}>
)
方法一、在子组件里使用
先要引入Redirect
import { Redirect } from ‘react-router’;
class Login extends React.Component {
render() {
const {isRegisterNewUser,loginSuccess}=this.props;
const { getFieldDecorator} = this.props.form;
if(loginSuccess){*return (<Redirect to="/chat" />);*
}else{return(这里放没登陆之前的各种form表单)
} }
}
方法二、来自下面的大佬:静对94
import PropTypes from ‘prop-types’;
static contextTypes = {
router: PropTypes.object.isRequired,
}
console.log(this.context.router)
例如:
class Login extends React.Component {static contextTypes = {router: PropTypes.object.isRequired,}render() {const {isRegisterNewUser,loginSuccess}=this.props;const { getFieldDecorator} = this.props.form;if(loginSuccess){//登陆状态变为成功this.context.router.history.push('/chat)}else{return(这里放没登陆之前的各种form表单)} }}
方法三、来自Inori_Lover 大佬推荐的官方文档:使用withRouter解决
import {withRouter } from 'react-router';
class Login extends React.Component {static contextTypes = {router: PropTypes.object.isRequired,}render() {const {isRegisterNewUser,loginSuccess,history}=this.props;const { getFieldDecorator} = this.props.form;if(loginSuccess){//登陆状态变为成功this.props.history.push('/chat)}else{return(这里放没登陆之前的各种form表单)} }}...const Login=withRouter(connect(mapStateToProps,mapDispatchToProps)(TLogin))
export default Login;
如果你没有使用redux,那么你使用withRouter的正确姿势应该是
const Login=withRouter(TLogin)
export default Login;
四、重点就是:
感谢各位大佬的指点,是我太浮躁,没认真阅读文档,以后一定多看。不管什么方式,解决问题才是最重要的。
react-router4.2使用js控制路由跳转的3种方式相关推荐
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- vue中实现路由跳转的三种方式(超详细整理)
vue中实现路由跳转的三种方式 一.使用vue-router vue-router 本质是一个第三方的包 用的时候需要下载 步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
- vue 函数 路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
- 阻止路由跳转得方式_vue中路由跳转的三种方式 简洁易懂
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
- vue设置html自动跳转路由,vue路由跳转的三种方式是什么?
本教程操作环境:windows7系统.vue2.9版,适用于所有品牌电脑. vue中通过路由跳转的三种方式 router-view 实现路由内容的地方,引入组件时写到需要引入的地方, 需要注意的是,使 ...
- Vue路由跳转的几种方式及解释说明
一.router-link(声明式路由,在页面中调用) 在Vue中,router-link称为声明式路由,常放在页面中,:to绑定为跳转的目标地址,通过点击实现跳转,路由的跳转主要有两种形式,一种是通 ...
- vue路由跳转的几种方式
1.router-link (声明式路由) 1. 不带参数<router-link :to="{name:'home'}"> <router-link :to=& ...
- 基于Taro开发小程序笔记--04路由跳转的几种方式
wx.navigateTo 带单个字符参数xxxwx.navigateTo({url: 'page/home/home?params=xxx' }) 带字符串对象Object wx.navigateT ...
最新文章
- SQLDMO- (数据备份与恢复篇)
- Python实现获得SQLServer数据库中的表插入到Oracle数据库
- 老旧计算机升级云桌面,哇哦!PC机房轻松升级云课堂 ,PC利旧方案看我的!
- JavaScript 第一课 JavaScript简史
- zookeeper 入门讲解实例 转
- Rinne Loves Xor
- 前端笔试面试题之二(2015阿里前端笔试)
- 2017年商业智能的6大趋势
- Nginx - 限制并发、限制访问速率、限制流量
- 新闻管理系统——项目介绍+前期部署
- 微信小程序java后端_微信小程序访问后端服务器-微信小程序后端-微信小程序后端JAVA...
- Libcurl的初步实现tfp上传下载功能
- JS文本中间显示省略号
- Day08_vant实现_网易云音乐案例
- 物联网技术练习题(二)——多选题与简答题
- UNCTF 2022 部分WP
- 看《赢在中国》的一点思绪
- LightProxy
- YOLOv5报错AssertionError:Label class 1 exceeds nc=1 in yolo/dataset.ymal Possible class labels are 0-0
- 紫光集团就“华亚科工程师被紫光集团挖角”事件发表声明
热门文章
- 计算机组成原理、操作系统、数据结构和计算机网络融会贯通
- mysql rds云数据库_云数据库 RDS MySQL快速入门手册
- python远程聊天_Python实现多人在线匿名聊天的小程序
- IDEA修改创建多级package包结构样式
- Kaggle一周30小时Tesla P100教程~
- 全球及中国隐形眼镜护理液行业消费规模及投资竞争力分析报告2021-2027年
- 用浏览器访问防火墙提示建立连接失败的有点总结
- 熔断机制什么意思_[财经]熔断机制的由来介绍 熔断机制什么意思 - 南方财富网...
- 悬挂式Notification 停留几秒后自动消失 且保留状态栏的通知(自定义消息)
- 中国制造2025关于智能驾驶汽车的相应介绍