React路由传参

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

导读：1.params方式? ? 优点：刷新地址栏参数依然存在 ? 缺点：只能传字符串，传递参数过多时地址栏URL会很长 // 路由配置 Route path=‘/user/:id‘ component={User}/ // 使用link跳转 link to="/user/1001"xxx/Link // 使用js跳转 this .props.history.push({pa

1.params方式?

? 优点：刷新地址栏参数依然存在

? 缺点：只能传字符串，传递参数过多时地址栏URL会很长

// 路由配置
<Route path=‘/user/:id‘ component={User}/>
// 使用link跳转
<link to="/user/1001">xxx</Link>
// 使用js跳转
this.props.history.push({pathname: ‘/user/‘ + id})
// 获取传递的参数
this.props.match.params.name

2.query方式

? ?优点：可以传对象

? ?缺点：刷新页面，参数不存在

// 路由配置
<Route path=‘/user‘ component={User}/>
// 使用link跳转
<Link to={{ path: "/user",query: {id: "1001"}}}>
// 使用js跳转
this.props.history.push({pathname:‘/user‘,query: { id : ‘1001‘ }})
// 获取传递的参数
this.props.location.query.id

（编辑：李大同）

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