情况:在app中引入了一个footerNav组件(路由也都引入了),然后在footerNav中点击按钮跳转,结果报错:
Uncaught TypeError: Cannot read property 'push' of undefined
解决:
方式1 通过propTypes将父组件app对象传入子组件footerNav
import PropTypes from 'prop-types';
class MenuHeader extends React.Component {
static propTypes = {
parentThis: PropTypes.object.isRequired,
}
...
/*这时候footerNav点击跳转:*/
this.props.parentThis.props.history.push(routerName);
...
}
export default MenuHeader;
上面这种方式比较...low?下面使用换个方式
使用react-router-dom的withRouter包组件
import {withRouter } from 'react-router-dom'
class MenuHeader extends React.Component {
...
/*这时候footerNav点击跳转:*/
this.props.history.push(routerName);
...
}
export default withRouter(MenuHeader);