React学习笔记——向路由组件传递params参数的3种方式

路由组件的属性

params参数

• 特点：路径中会暴露信息值，且需要声明接收
• 路由链接(携带参数)：

//直接传属性
<Link to={'/demo/test/tom/18'}>详情</Link>
//在该组件内部访问对象并传参
<Link to={`/demo/test/${obj.info1}/${obj.info2}`}>详情</Link>

• 注册路由(声明接收)：

<Route path="/demo/test/:name/:age" component={Test}/>

• 接收参数方式：const {name,age} = this.props.match.params

search参数

• 特点：需要querystring库的支持，进行数据处理，在路径中需要添加传入的参数数据，标志为“?”
• 路由链接(携带参数)：

<Link to='/demo/test/?name=tom&age=18'}>详情</Link>
<Link to=`/demo/test/?name=${obj.info2}&age=${obj.info2}`}>详情</Link>

• 注册路由(无需声明，正常注册即可)：

<Route path="/demo/test" component={Test}/>

• 接收参数：this.props.location.search

但是search形式是这样的，因此需要借助一个库——querystring来进行解析

操作流程如下：

1. 引入import qs from 'querystring'
2. 调用qs.stringify(obj)则转为字符串
3. 调用qs.parse(str)则转为对象
   举例如下：
   
   执行结果：
   

备注：获取到的search是urlencoded编码字符串，即形如key=value&key=value，需要借助querystring解析。

state参数

此属性不同于组件中的state属性，而是路由中专属的state参数

• 特点：path中不会混入传入的内容，且不需要额外的库。
• 路由链接(携带参数)：

//此处的to为双括号，意味传入的是一个对象，因此可以传入多个参数
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
<Link to={{pathname:'/demo/test',state:{name:obj.name,age:obj.age}}}>详情</Link>

• 注册路由(无需声明，正常注册即可)：

<Route path="/demo/test" component={Test}/>

• 接收参数：const {name,age} = this.props.location.state

备注：刷新也可以保留住参数，其实质是保存在缓存中的。

总结：