关于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 相关文章推荐
javascript调试说明
Jun 07 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 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实现rc4加密算法代码
2012/04/25 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
Python之re操作方法(详解)
2017/06/14 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python类共享变量操作
2020/09/03 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
企业总经理任命书
2014/06/05 职场文书
红色旅游心得体会
2014/09/03 职场文书
道德与公民自我评价
2015/03/09 职场文书
早会开场白台词大全
2015/06/01 职场文书
Python经常使用的一些内置函数
2022/04/11 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
Python find()、rfind()方法及作用
2022/12/24 Python