今天我把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> ); }; }
接着是子組件的使用historyjavascript
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 :java
但願我能幫助你react