React-页面路由参数传递的两种方法

发布时间：2020-12-15 20:25:02 所属栏目：百科来源：网络整理

导读：list页-detail页方法一：路由参数路由导航：用“/” Link to={‘/detail/‘+item.get(‘id‘)} key={index} 路由map：加"/：id" Route exact path="/detail/:id" component={Detail} / detail页获取参数：准确的获取到id，不需要做处理 this .props.mat

list页->detail页

方法一：路由参数

路由导航：

用“/”

<Link to={‘/detail/‘+item.get(‘id‘)} key={index}>

路由map：

加"/：id"

<Route exact path="/detail/:id" component={Detail} />

detail页获取参数：

准确的获取到id，不需要做处理

this.props.match.params.id

方法二：查询参数

路由导航：

用“？”

<Link to={‘/detail?‘+item.get(‘id‘)} key={index}>

路由map：

不加"/：id"

<Route exact path="/detail" component={Detail} />

detail页获取参数：

不能准确的获取到id，需要做处理

this.props.location.search

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!