react路由传参的三种方式

最新推荐文章于 2024-07-23 10:43:02 发布

--北海道的夏天不会说再见--

最新推荐文章于 2024-07-23 10:43:02 发布

阅读量512

点赞数

文章标签： react.js node.js

本文链接：https://blog.csdn.net/lonsole/article/details/119987913

版权

本文详细介绍了React中params、query和state三种参数传递方式。params传递的参数在刷新后仍然存在，且在URL中可见；query传递的参数刷新后会消失；而state传递的参数虽然刷新后不会消失，但其内容是加密的。文中还提供了各种传递和获取参数的方法示例。

摘要由CSDN通过智能技术生成

1、params传参（刷新页面后参数不消失，参数会在地址栏显示）
	路由页面：<Route path="/link/:id" component={Demo}><Route>//注意要配置/:id路由路由跳转并传递参数
	链接方式：<link to={'/link/'+'xxx'}>首页</link>或<Link to={{pathname:'/link/'+'xxx'}}>首页</link>
	js方式：this.props.history.push('/link/'+'xxx')或this.props.history.push({pathname:'/link/'+'xxx'})
	获取参数：this.props.match.params.id //注意这里是match而非history
	
2、query传参（刷新页面后参数消失）
	路由页面：<Route path="/demo" component={Demo}><Route>//无需配置 路由跳转并传递参数
	链接方式：<Link to={{pathname:'/link',query:{id:2,name:'lucy'}}}>xxx</Link>
	js方式：this.props.history.push({pathname:'/dmeo',query:{id:2,name:'lucy'}})
	获取参数：this.props.location.query.name
	
3、state传参（刷新页面后参数不消失，state传的参数是加密的）
	路由页面：<Route path="/link" component={Demo}><Route>//无需配置 路由跳转并传递参数
	链接方式：<Link to={{pathname:'/link',state:{id:2,name:'lucy'}}}>xxx</Link>
	js方式：this.props.history.push({pathname:'/dmeo',state:{id:2,name:'lucy'}})
	获取参数：this.props.location.state.name