当前位置 : 主页 > 网页制作 > React >

React路由传参

来源:互联网 收集:自由互联 发布时间:2021-06-15
1.params方式 优点:刷新地址栏参数依然存在 缺点:只能传字符串,传递参数过多时地址栏URL会很长 // 路由配置 Route path=‘/user/:id‘ component={User}/ // 使用link跳转 link to="/user/1001"xxx/Link

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
网友评论