1. 程式人生 > >React筆記(一):react-router跳轉傳值

React筆記(一):react-router跳轉傳值

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中