react js用withRouter实现页面跳转

首先我们需要知道，我们需要实现页面跳转的组件是否是page层面的组件（即在APP.jsx中有router定义的组件），如果是，可以直接用this.props.history.push(path)实现。

那如果我们需要实现页面跳转的组件是page组件下的子组件应该怎么办呢？这种组件的this.props是undifined，所以我们需要从父组件（page层面的组件）传递props给子组件。

首先在父组件引入proptype（为了通过eslintrc的验证）,并在父组件中定义proptype:

import LoginCard from "../components/LoginCard";//在父组件中引入子组件
import PropTypes from 'prop-types';

Login.propTypes = {
    history:PropTypes.object,

}
//Login为父组件名称
//注意：定义proptypes写在组件外

在父组件中引入子组件：

并利用history传this.props给子组件：

render() {

        const { history } = this.props;
        

        return (
            <LoginCard history={history}>
            </LoginCard>
        );
    }
//LoginCard为子组件

<