2022-03-25 学习记录--React-向路由组件传递参数（旧版本）

本文链接：https://blog.csdn.net/weixin_48850734/article/details/123921694

在这里插入图片描述

一、实现效果

点击菜单消息1，显示对应id为01的详情内容；

点击菜单消息2，显示对应id为02的详情内容；

点击菜单消息3，显示对应id为03的详情内容；

二、实现方式

在这里插入图片描述

方法1、向路由组件传递`params`参数

向Detail组件传递参数id和title

【注意：``模板字符串是js里的东西，使用这个时要在外层加个花括号{}】

【注意：图片可能有些是6.0版本的写法，所以以图片下面的代码为准哟】
在这里插入图片描述

{/* 第一步、向路由组件传递params参数——``模板字符串是js里的东西，使用这个（js表达式）时要在外层加个花括号{} */}
<Link to={`/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>

{/* 第二步、声明接收params参数 */}
<Route path="/message/detail/:id/:title" component={Detail} />

接收`params`参数

在Detail组件里通过this.props.match.params接收到params参数
在这里插入图片描述

方法2、向路由组件传递`search`参数

【注意：图片可能有些是6.0版本的写法，所以以图片下面的代码为准哟】
在这里插入图片描述

{/* 第一步、向路由组件传递search参数——``模板字符串是js里的东西，使用这个（js表达式）时要在外层加个花括号{} */}
<Link to={`/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

{/* 第二步、search参数无需声明接收，正常注册路由即可 */}
<Route path="/message/detail" component=<Detail} />

接收`search`参数

通过this.props.location获取到search，然后需要借助qs才能获取到参数哟~

qs是一个npm仓库所管理的包

qs.parse()将URL解析成对象的形式
qs.stringify()将对象序列化成URL的形式，以&进行拼接

在这里插入图片描述

方法3、向路由组件传递`state`参数

【注意：图片可能有些是6.0版本的写法，所以以图片下面的代码为准哟】
在这里插入图片描述

{/* 第一步、向路由组件传递state参数 */}
<Link to={{pathname:'/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

{/* 第二步、state参数无需声明接收，正常注册路由即可 */}
<Route path="/message/detail" component={Detail} />

接收`state`参数

在Detail组件里通过this.props.location.state接收到state参数
在这里插入图片描述

总结

向路由组件传递参数
				1.params参数
							路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
							注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
							接收参数：this.props.match.params
				2.search参数
							路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
							注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
							接收参数：this.props.location.search
							备注：获取到的search是urlencoded编码字符串，需要借助querystring(qs)解析
				3.state参数
							路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
							注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
							接收参数：this.props.location.state
							备注：刷新也可以保留住参数