有關v4 history不能訪問的原因

這篇文章主要為大家介紹了關於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 (
  <p>
  <button onClick={this.test}>按钮</button>
  </p>
 );
 };
}

讓我們看看this.context :

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

利用node.js等技術如何實現登入註冊功能？

在vue中如何使用filter過濾器

#前端演算法中有關文字避讓的問題（詳細教學）

以上是有關v4 history不能訪問的原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！