当我们点击列表,想在url上面动态传递参数,然后详情页获取参数,查询数据,渲染数据,具体怎么做了?上代码
其实一行代码就搞定了
<Route path='/list/:id' component={List}></Route>
let id = this.props.match.params.id;
好,具体来看
1:在AppRouter.js中,必须定义一个动态传递参数为id
function AppRouter(){
return(
<Router>
<ul>
<li><Link to='/'>首页</Link></li>
<li><Link to='/list/123456'>列表</Link></li>
</ul>
<Route exact path='/' component={Index}></Route>
<Route path='/list/:id' component={List}></Route>
</Router>
)
}
2:在List页面生命周期获取这个参数
componentDidMount(){
console.log(this.props);
//获取页面传递过来的参数id
let id = this.props.match.params.id;
this.setState({
id
})
}
3:大功告成
来个小demo
Index.js
constructor(props) {
super(props);
this.state={
arr:[
{cid:123,title:"好好学习React"},
{cid:456,title:"好好学习Vue"},
{cid:789,title:"好好学习Node"},
]
}
}
render(){
return(
<div>
<h2>我是首页</h2>
<ul>
{this.state.arr.map((item,key)=>{
return <li key={key}>
<Link to={`/list/${item.cid}`}>{item.title}</Link>
</li>
})
}
</ul>
</div>
)
}
效果图