React筆記(一):react-router跳轉傳值
阿新 • • 發佈:2019-01-31
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中