React 列表进入详情页面
首先安装 react-router-dom (4.0) npm/yarn install react-router-dom
路由跳转配置
列表 父组件 this.props.history.push( { pathname:'/detail', state: data } )
上述的data 为明细的数据
那么详情页面如何接收父组件的数据呢？
const detaildata = this.prop.location.stata.data
注意如果 父组件进入详情页面 this.props.history.push();这个报错时. 引入 import { withRouter } from 'react-router'即可。
部分代码如下
列表组件
import React, { Component } from 'react'
import { withRouter } from 'react-router';
export class List extends Component {
constructor(props) {
super(props);
this.state={
list: [
{
"author": "acemarke",
"points": 125,
"story_text": null,
"comment_text": null,
"num_comments": 32,
"story_id": null,
"story_title": null,
"story_url": null,
"parent_id": null,
"created_at_i": 1460737187,
"relevancy_score": 6666
},
{
"author": "jlongster",
"points": 124,
"story_text": null,
"comment_text": null,
"num_comments": 54,
"story_id": null,
"story_title": null,
"story_url": null,
"parent_id": null,
"created_at_i": 1448479344,
"relevancy_score": 6397
},
{
"author": "myth_drannon",
"points": 123,
"story_text": null,
"comment_text": null,
"num_comments": 78,
"story_id": null,
"story_title": null,
"story_url": null,
"parent_id": null,
"created_at_i": 1499396674,
"relevancy_score": 7526
}]
}
}
viewdetail (item) {
this.props.history.push({ pathname: '/detail', state: {data:item} })
}
render() {
return (
<div>
{ths.state.list.map(item => {
return (
<div key={item.points} onClick={ ()=>this.viewdetail(item)} >
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
)
})}
</div>
)
}
}
export default withRouter(List)
详情页面
import React, { Component } from 'react'
export class DetailList extends Component {
constructor(props) {
super(props)
const data = this.props.location.state.data;
this.state={
data:data
}
}
render() {
return (
<div>
<List>
<div>
{this.state.data.author}
</div>
</List>
</div >
)
}
}
export default DetailList