react-router v4传递参数

最新推荐文章于 2025-05-08 10:50:17 发布

przlovecsdn

最新推荐文章于 2025-05-08 10:50:17 发布

阅读量5.9k

点赞数

文章标签： react react-router react-router传参 params query

本文链接：https://blog.csdn.net/przlovecsdn/article/details/81740791

版权

本文详细介绍了在React Router v4中通过params、query和state三种方式传递参数的方法，包括配置路由表、在Link中设置参数以及在目标组件中接收参数的方式。强调了params直接传递，query和state参数在跳转时加密的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意： 路由表改变后要重启服务

方式一：

通过params

1.路由表中

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

2.Link处

HTML方式

JS方式

this.props.history.push( { pathname:' /user/2 ',query:{name:jack},state:{value:123},search:'?sort=name',hash:'#the-hash',abc:'def'})

3.user页面

通过 this.props.match.params.id 就可以接受到传递过来的参数（id）

方式二：

通过query

前提：必须由其他页面跳过来，参数才会被传递过来，query传的参数是加密的

　　　 注：不需要配置路由表。路由表中的内容照常：<Route path='/user' component={User}></Route>

1.Link处

HTML方式

JS方式

this.props.history.push({ pathname:' /user',query:{name:jack},state:{value:123},search:'?sort=name',hash:'#the-hash',abc:'def'})

2.user页面

this.props.location.query.name //jack

this.props.location.state.value //123

this.props.location.search //?sort=name

this.props.location.hash //#the-hash

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

方式三：

通过state

同query差不多，只是属性不一样，state传的参数是加密的

1.Link 处

HTML方式：

JS方式：

this.props.history.push({ pathname:' /user',query:{name:jack},state:{value:123},search:'?sort=name',hash:'#the-hash',abc:'def'})

2.user页面

this.props.location.state.value