react-router v4 参数传递

react

react-router v4" title="react-router v4">react-router v4 参数传递有3中方式,分别是params,query 和 state。

1. params(路径参数)

parrams的传递要在路由配置上添加参数,是路由路径的一部分,在斜杠后面写参数,就是路径参数。

//路由表

<Route path='/user/:id ' component={User}></Route>

//Link方式

<Link to={ pathname:' /user/2 '}>XXXX</Link>

//js方式

this.props.history.push( { pathname:' /user/2 '})

//接收

this.props.match.params.id

2. search(查询字符串)

无需修改路由表,直接带参数即可,需要encode。

//Link方式

<Link to={pathname:' /user',query:{name:'meimei'}}>

//js方式

this.props.history.push({ pathname:' /user',query:{name:'meimei'}})

//接收方式

this.props.location.query.name //meimei

3. state

无需修改路由表,直接传递。

//Link方式

<Link to={{ pathname:' /user', state:{value:123}}}>

//js方式

this.props.history.push({ pathname:' /user', state:{value:123}})

//接收方式

this.props.location.state.value

4. hash或自定义参数

//Link方式

<Link to={{ pathname:' /user',hash:'#hashvalue',abc:'def'}}>

//js方式

this.props.history.push({ pathname:' /user', hash:'#hashvalue',abc:'def'})

//接收方式

this.props.location.hash //#hashvalue

this.props.location.abc //def (自定义参数)

以上是 react-router v4 参数传递 的全部内容, 来源链接: utcz.com/z/381773.html

回到顶部