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

2019-11-19 14:34:00

字體：大中小

供稿：網(wǎng)友

前言

最近把react-router 升級(jí)了一下，在使用react-router-dom 是，子組件使用this.props.history 找不到了，看看官方文檔，找了半天也沒(méi)找到，因?yàn)槲沂窃诋惒綀?zhí)行完后才跳轉(zhuǎn)頁(yè)面，需要用到push 或者replace，怎么辦啊，國(guó)內(nèi)知識(shí)都是你復(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';// 這是按需加載，對(duì)于現(xiàn)在討論的問(wèn)題沒(méi)有影響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 這個(gè)，import PropTypes from 'prop-types';export default class Hello extends Component { constructor(props) { super(props); } // 這一步是重點(diǎn) 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 :