react js用withRouter实现页面跳转

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

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

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

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

1.  
   Login.propTypes = {
2.  
   history:PropTypes.object,
3.  
    
4.  
   }
5.  
   //Login为父组件名称
6.  
   //注意：定义proptypes写在组件外

在父组件中引入子组件：

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

1.  
   render() {
2.  
    
3.  
   const { history } = this.props;
4.  
    
5.  
    
6.  
   return (
7.  
   <LoginCard history={history}>
8.  
   </LoginCard>
9.  
   );
10.  
    }
11.  
    //LoginCard为子组件

至此，父组件的工作我们就完成了。来到子组件：

同样设置proptypes:

1.  
   LoginCard.propTypes = {
2.  
   history11:PropTypes.object,
3.  
    
4.  
   }

用componentDidMount获得父组件中传入的props，保存在parent_prop全局变量中。

var parent_prop=null

1.  
   componentDidMount () {
2.  
    
3.  
   parent_prop=this.props
4.  
   }

然后在需要页面跳转的地方写上，即可完成跳转。

parent_prop.history.push('path')

这篇好文章是转载于：学新通技术网