react裏面 react-router4 跳轉

在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);