一、实现效果
点击菜单消息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
备注：刷新也可以保留住参数
These are bilibili尚硅谷React学习视频的 学习笔记~