React路由传递params、search、state参数的相关处理
2023-02-18 16:30:13 时间
路由传递参数基本都分为三个步骤:传递参数、声明接收参数、获取参数
传递params参数
<!-- 传递参数 -->
<Link to={`/路径/${value}/${value}`}
<!-- 声明接收参数 -->
<Route path="/路径/:key/:key" />
//获取参数
console.log(this.props.match.params)
传递state参数
<!-- 传递参数 -->
<Link to={{pathname: '/路径', state: {key: value}}} />
<!-- 声明接收 -->
<Route path="/路径" />
//获取参数
congole.log(this.props.location.state)
传递search参数
<!-- 传递参数 -->
<Link to={`/路径/?key=${变量}`} />
<!-- 声明接收参数 -->
<Route path="/路径" />
//获取参数
console.log(this.props.location.search) //?key=value&key=value
import qs from 'querystring'
const obj = qs.parse(this.props.location.search.slice(1))
console.log(obj) // {key: value, key: value}
在路径后使用?key=value的形式传递参数,传递多个参数使用&符号连接
使用search传参时不需要声明接收参数
获取参数时search参数没有像params一样是一个对象,可使用第三方库querystring进行处理
如果是使用react脚手架搭建的项目可直接引入,否则需要使用命令安装
安装第三方库命令 npm i querystring
Tips:使用slice方法将search参数中的问号去掉
querystring
let str = 'name=swt&age=20'
console.log(qs.parse(str)) //{name: "swt", age: "20"}
let obj = {name: "swt", age: "20"}
console.log(qs.stringify(obj)) //name=swt&age=20
qs.stringify()方法将对象转换成urlencode编码格式
qs.parse()方法将urlencode编码格式转换成对象
相关文章
- 年近而立,Java何去何从?
- Java安全之Webshell免杀
- Java代码审计之某博客
- Java代码审计之不安全的Java代码
- java代码审计的点
- 简单的java代码审计
- FL Studio21完整版安装包下载FL2023最新版本
- 与(&)、或(|)、异或(^) – 位运算详解
- 基于Wechaty+Docker打造一个ChatGPT机器人
- WordPress主题制作:开始前的准备
- WordPress主题制作(一):主题文件结构
- Docker Portainer – Docker目前最好的可视化管理工具
- classpath和classpath*的区别及classpath到底是什么
- WordPress主题制作(二):模板和模板文件
- Spring AOP详解
- WordPress主题制作(三):牛刀小试
- spring boot 2.x 整合mybaits及分页插件
- spring boot 启动的时候required a bean of type 'XXX' that could not be
- 向maven中央仓库提交jar
- 图解设计模式:动动手玩转迭代器模式