關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:22:02

關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決

關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決:前言最近把react-router 升級了一下，在使用react-router-dom 是，子組件使用this.props.history 找不到了，看看官方文檔，找了半天也沒找到，因為我是在異步執(zhí)行完后才跳轉(zhuǎn)頁面，需要用到push 或者replace，怎么辦啊，國內(nèi)知識都是你復(fù)制我的，我復(fù)

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決:前言最近把react-router 升級了一下，在使用react-router-dom 是，子組件使用this.props.history 找不到了，看看官方文檔，找了半天也沒找到，因為我是在異步執(zhí)行完后才跳轉(zhuǎn)頁面，需要用到push 或者replace，怎么辦啊，國內(nèi)知識都是你復(fù)制我的，我復(fù)

前言

最近把react-router 升級了一下，在使用react-router-dom 是，子組件使用this.props.history 找不到了，看看官方文檔，找了半天也沒找到，因為我是在異步執(zhí)行完后才跳轉(zhuǎn)頁面，需要用到push 或者replace，怎么辦啊，國內(nèi)知識都是你復(fù)制我的，我復(fù)制你的，都特么垃圾。只能去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';
// 這是按需加載，對于現(xiàn)在討論的問題沒有影響
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 :