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

 更新时间:2018年01月08日 13:44:09   作者:zhanglearning  
这篇文章主要给大家介绍了关于react-router/react-router-dom v4 history不能访问问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。

前言

最近把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 :

总结

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

相关文章

  • mobx在react hooks中的应用方式

    mobx在react hooks中的应用方式

    这篇文章主要介绍了mobx在react hooks中的应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React类组件和函数组件对比-Hooks的简介

    React类组件和函数组件对比-Hooks的简介

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期,这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下
    2022-11-11
  • React Hooks 实现的中文输入组件

    React Hooks 实现的中文输入组件

    这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React如何实现像Vue一样将css和js写在同一文件

    React如何实现像Vue一样将css和js写在同一文件

    这篇文章主要介绍了React如何实现像Vue一样将css和js写在同一文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    这篇文章主要介绍了React+echarts (echarts-for-react) 画中国地图及省份切换,有足够的地图数据,可以点击到街道,示例我只出到市级,本文结合实例代码给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • 使用react-native-doc-viewer实现文档预览

    使用react-native-doc-viewer实现文档预览

    这篇文章主要介绍了使用react-native-doc-viewer实现文档预览,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • react context优化四重奏教程示例

    react context优化四重奏教程示例

    这篇文章主要为大家介绍了react context优化四重奏教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解React 如何防止 XSS 攻击论$$typeof 的作用

    详解React 如何防止 XSS 攻击论$$typeof 的作用

    这篇文章主要介绍了详解React 如何防止 XSS 攻击论$$typeof 的作用,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 一文搞懂redux在react中的初步用法

    一文搞懂redux在react中的初步用法

    Redux是JavaScript状态容器,提供可预测化的状态管理,今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法,感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    React Hooks useReducer 逃避deps组件渲染次数增加陷阱

    这篇文章主要介绍了React Hooks 之 useReducer 逃避deps后增加组件渲染次数的陷阱详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论