React路由传参

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

 

 

posted @ 2019-05-30 10:25  jmwei  阅读(143)  评论(0编辑  收藏  举报