react 路由跳转与传值

react 路由跳转与传值

路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)
history : 主要用于路由跳转和路由监听
location: 主要显示路由信息, 可用于路由传值
match: 主要用于路由传值, 也可展示路由信息

react路由跳转方式1: 路由标签Link跳转

   <Link to="/user">跳转个人中心</Link>  <br/>

react路由跳转方式2: 编程式导航跳转

<button onClick={()=>{
    props.history.push('/user')
}}>跳转个人中心</button>

react路由传值方式1: url路径拼接传值

   <Link to={"/user?name="+name}>url路经拼接传值</Link>
    接收 {decodeURI(this.props.location.search)}

react路由传值方式2: 动态路由(友好url)传值

<Link to={"/user/"+name}>动态路由(友好url)传值</Link>
接收  {this.props.match.params.name}

react路由传值方式3: 自定义对象传值

<Link to={{
    pathname: "/user",
    data: { name }
}}>自定义对象传值</Link>
接收 {this.props.location.data && this.props.location.data.name}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值