react里面 react-router4 跳转
Posted Zina
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
以上是关于react里面 react-router4 跳转的主要内容,如果未能解决你的问题,请参考以下文章
React学习及实例开发——用react-router跳转页面
webpack4.X + react-router 路由跳转