react-router/react-router-domv4history不能访问怎么办

这篇文章主要介绍了react-router/react-router-dom v4 history不能访问怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联主营芦山网站建设的网络公司,主营网站建设方案,App定制开发,芦山h5微信小程序搭建,芦山网站营销推广欢迎芦山等地区企业咨询

前言

最近把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 = () => (
 
  {(Hello) => }
 
);
export default class App extends Component {
 constructor(props) {
 super(props);
 }
 render() {
 return (
  
  
   
  
  
 );
 };
}

接着是子组件的使用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 (
  
  按钮   
 );  }; }

让我们看看this.context :

react-router/react-router-dom v4 history不能访问怎么办

感谢你能够认真阅读完这篇文章,希望小编分享的“react-router/react-router-dom v4 history不能访问怎么办”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章题目:react-router/react-router-domv4history不能访问怎么办
链接地址:http://myzitong.com/article/ppcodo.html