关于react-router/react-router-dom v4 history不能访问问题的解决


Posted in Javascript onJanuary 08, 2018

前言

最近把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history  找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行完后才跳转页面,需要用到push 或者replace,怎么办啊,国内知识都是你复制我的,我复制你的,都特么垃圾。只能去Google,

最终找到了答案:(看代码一目了然)

解决方法

首先使用router

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'mobx-react';
import stores from '../store/index';
import Bundle from '../components/bundle';
import Hello from 'bundle-loader?lazy!../components/hello.jsx';
// 这是按需加载,对于现在讨论的问题没有影响
const HelloAPP = () => (
 <Bundle load={Hello}>
  {(Hello) => <Hello />}
 </Bundle>
);
export default class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
  <Provider { ...stores }>
  <BrowserRouter basename="/">
   <Route path="/" component={HelloAPP}/>
  </BrowserRouter>
  </Provider>
 );
 };
}

接着是子组件的使用history

import React, { Component } from 'react';
// 需要这步,你要npm 这个,
import PropTypes from 'prop-types';
export default class Hello extends Component {
 constructor(props) {
 super(props);
 }
 // 这一步是重点
 static contextTypes = {
 router: PropTypes.object.isRequired
 };
 test = () => {
 console.log(this.context);
 setTimeout(() => {
  this.context.router.history.push("/otherPath");
 }, 1000);
 };
 render() {
 return (
  <div>
  <button onClick={this.test}>按钮</button>
  </div>
 );
 };
}

让我们看看this.context :

关于react-router/react-router-dom v4 history不能访问问题的解决

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Javascript的this详解
Mar 23 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 #Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 #Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 #Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 #Javascript
webpack构建的详细流程探底
Jan 08 #Javascript
详解ES6中的代理模式——Proxy
Jan 08 #Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php简单日历函数
2015/10/28 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
观看《永远的雷锋》心得体会
2014/03/12 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
大学生就业意向书
2015/05/11 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
分享3个非常实用的 Python 模块
2022/03/03 Python