【无标题】react 路由传参方式

react路由方式

params方式

路由

<Route path="/someComponent/:id/:name" exact component={SomeComponent} />

跳转

//方式一
<Link to =`/someComponent/${id}/${name}`>someComponent</Link>
//方式二
router.push({
    pathname:'someComponent',
    params:{id: id, name: name}
})

获取

const {id, name} = this.props.match.params

优点：多页面刷新数据不会丢失，

缺点：不能传递参数带'/'的参数，改方法传参只能通过字符串的方式传递，如果要传递一个对象，需要先将这个对象转化成字符串(JSON.stringify(obj))

query方式

路由

<Route path="/someComponent" exact component={SomeComponent} />

跳转 

router.push({
pathname:'/detail',
query:{id:item.id}
})

获取参数

const {id, name} = props.location.query

缺点：刷新参数丢失

state方式与quer类似

router.push({
pathname:'/someComponent',
state:{id:id,name:name}
})

与query不同的是state在browersRouter方式下即路由跳转为history方式时stae方式刷新参数不丢失

search方式

该方式可以借助query-string第三方插件使得参数在刷新的情况不消失

 history.push({
      pathname: `/someComponent`,
      search: qs.stringify{id:id, name:name},
      })

获取使用qs.parse进行参数获取