React笔记（一）：react-router跳转传值

Link 实现路由跳转

import { Link } from 'react-router';<Link to={ pathname = '/browser/browserProportion/detail'}>{this.name}</Link>

react-router 传值的方式

（1）props.params

• 传值端

 <Link to = {'/browser/browserProportion/detail/' + id};

或

<Link to = {'/browser/browserProportion/detail/:id'}


或

<Link to = {'/browser/browserProportion/detail/${id}'}

- 接收端

let data = this.props.params.id

（2）state

• 传值端

<Link to = {pathname ='/browser/browserProportion/detail',state:data }

• 接收端

let data = this.props.location.state;let {name,appid,clientMobile} = data;

（3）query

• 传值端

<Link to = {pathname ='/browser/browserProportion/detail',query:data }

• 收值端

let data = this.props.location.query;let {name,appid,clientMobile} = data;

state和query传值方式非常类似，区别是state不是明文传值，query是明文传值，传递的值会出现在url中