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

路由组件的属性

React学习笔记——向路由组件传递params参数的3种方式_第1张图片

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来进行解析
React学习笔记——向路由组件传递params参数的3种方式_第2张图片
操作流程如下:

  1. 引入import qs from 'querystring'
  2. 调用qs.stringify(obj)则转为字符串
  3. 调用qs.parse(str)则转为对象
    举例如下:
    React学习笔记——向路由组件传递params参数的3种方式_第3张图片
    执行结果:
    在这里插入图片描述

备注:获取到的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

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

总结:
React学习笔记——向路由组件传递params参数的3种方式_第4张图片

你可能感兴趣的:(React,react,javascript,html,参数传递)