react 路由传参列表传详情
2019-04-19 本文已影响0人
雨泽丶
list页->detail页
方法一:路由参数**
路由导航:
用“/”
<Link to={'/detail/'+item.get('id')} key={index}>
**路由map:**
加"/:id"
<Route exact path="/detail/:id" component={Detail} />
detail页获取参数:
准确的获取到id,不需要做处理
<pre>this.props.match.params.id</pre>
方法二:查询参数**
路由导航:
用“?”
<Link to={'/detail?'+item.get('id')} key={index}>
用"$"
<Link to={`/statics/helloWorld/${id}/${appName}`}>
// 或者
<Link to={{pathname: `/statics/helloWorld/${id}/${appName}`}}>
**路由map:**
不加"/:id"
<Route exact path="/detail" component={Detail} />
detail页获取参数:
不能准确的获取到id,需要做处理
this.props.location.search
代码中出现的问题
this.props.history.push({
pathname: '/me'
})
网页报错history/push 是无法识别的函数
解决问题方法:
父组件里
<Page {...this.props}/>
调用props给子组件