码迷,mamicode.com
首页 > 其他好文 > 详细

react里面 react-router4 跳转

时间:2018-05-11 20:40:51      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:传参   ide   ret   ons   lis   component   image   inf   type   

在react里面跳转的时候,一般可以用

<Link to=‘/tradeList‘ />

但是我们在运用组件组合的时候经常会通过传参去判断,如果props传过来是参数,如果有link进行跳转,没有link,不跳转或者其他操作

我是这样尝试的

<Link to={this.props.link ? this.props.link : ‘/‘} />

有link的时候确实会跳转,没有link的时候,卧槽,报错了

技术分享图片

技术分享图片

 

那就换种方式,通过js里面去控制

第一种方式

linkTo(){
    Modal.info({
        title:‘正在开发,敬请期待 ...‘,
        onOk() {}
      });
}


colDom(data){
    if(!data.link){
        return(
            <Col span={4} align=‘middle‘ onClick={this.linkTo.bind(this, data.link)}>
                <Icon type={data.iconText} className={data.color} />
                <div className=‘mt5‘>{data.txt}</div>
            </Col>
        )
    }
    return(
        <Col span={4} align=‘middle‘>
            <Link to={data.link}>
                <Icon type={data.iconText} className={data.color} />
                <div className=‘mt5‘>{data.txt}</div>
            </Link>
        </Col>
    )
}


{this.colDom(dataArr)}

 

第二种方式

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

class BothSides extends React.Component{
    constructor(props){
        super(props);
    }
    linkTo(link){ 
        if(link){
            this.props.history.push(link);
        }
    }
    render(){
        let data = this.props.data;
        return(
            <div onClick={this.linkTo.bind(this,data.link)}>hello</div>
        )
    }
}

export default withRouter(BothSides);

 

react里面 react-router4 跳转

标签:传参   ide   ret   ons   lis   component   image   inf   type   

原文地址:https://www.cnblogs.com/wzndkj/p/9025844.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!