zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    并发编程-操作系统简史,多道技术
    python下的excel表格处理 内含面试题
    epoll模型的探索与实践
    nginx搭建静态网站
    面向对象基础
    python+Django 下JWT的使用
    linux的history命令
    携程apollo配置中心Quick Start
    redis哨兵
    redis的主从复制
  • 原文地址:https://www.cnblogs.com/l8l8/p/9477015.html
Copyright © 2011-2022 走看看