关于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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
Vue动态组件实例解析
Aug 20 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
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
PHP编程网上资源导航
2006/10/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
js日期联动示例
2014/05/02 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python的正则表达式re模块的常用方法
2013/03/09 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python开发之文件操作用法实例
2015/11/13 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
村党支部书记个人对照材料汇报
2014/10/26 职场文书
停电通知范文
2015/04/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书