react-router的坑

componentWillReceiveProps(nextProps){
    
  在改钩子函数里接受组件变化的最近的传递的props
 如果在这里没有使用nextprops 而是调用this.props
会出现一个路由切换点击两次的bug 会导致组件切换不及时。
}

解决办法： 必须使用nextprops来作为参数传值。

 withRouter (react编程式导航的写法，使用该方法后就可以让该组件默认时具有props等属性)

引入withRouter之后,就可以使用编程式导航进行点击跳转, 需要注意的是export default的暴露如上面所写,如果结合redux使用,则暴露方式为: withRouter(connect(...)(MyComponent))
调用history的goBack方法会返回上一历史记录
调用history的push方法会跳转到目标页,如上面goDetail方法
跳转传参: push()可以接收一个对象参数,跳转之后,通过this.props.location.state接收

import {withRouter} from 'react-router-dom';

goBack(){
    this.props.history.goBack();
}  
goDetail(){
    this.props.history.push('/detail');
}  
goDetailWithParam(item){
    this.props.history.push({pathname : '/cart',state:{item}});
}
    
<span className="ico" onClick={this.goBack.bind(this)}>
    <i className="iconfont">&#xe501;</i>
</span>
//这里的item来自for循环的每一项
<li onClick={this.goDetailWithParam.bind(this,item)} key={encodeURI(item.imgUrl)}>

export default withRouter(Header);