关于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 :

总结

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

相关文章

  • React Native 资源包拆分实战分析

    React Native 资源包拆分实战分析

    这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • React.js组件实现拖拽排序组件功能过程解析

    React.js组件实现拖拽排序组件功能过程解析

    这篇文章主要介绍了React.js组件实现拖拽排序组件功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • React解析html 标签的方法

    React解析html 标签的方法

    在React中,解析HTML标签通常是使用JSX(JavaScript XML)语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • React开启代理的2种实用方式

    React开启代理的2种实用方式

    最近有不少伙伴询问react的代理配置,自己也去试验了一下发现不少的问题,在这就将所遇到的心得分享出来,这篇文章主要给大家介绍了关于React开启代理的2种实用方式的相关资料,需要的朋友可以参考下
    2021-07-07
  • 详解React 元素渲染

    详解React 元素渲染

    这篇文章主要介绍了React 元素渲染的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 深入掌握 react的 setState的工作机制

    深入掌握 react的 setState的工作机制

    本篇文章主要介绍了深入掌握 react的 setState的工作机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React Context详解使用方法

    React Context详解使用方法

    Context提供了一个无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。在一个典型的 React 应用中,数据是通过props属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的
    2022-12-12
  • React SSR 中的限流案例详解

    React SSR 中的限流案例详解

    这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一,本文会通过一个简单的案例来说明,为什么服务端需要进行限流,需要的朋友可以参考下
    2022-07-07
  • React如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 五分钟教你了解一下react路由知识

    五分钟教你了解一下react路由知识

    本文主要介绍了react路由知识,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论