這篇文章主要為大家介紹了關於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>
);
};
}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>
);
};
}
以上是有關v4 history不能訪問的原因的詳細內容。更多資訊請關注PHP中文網其他相關文章！
