React路由传递params、search、state参数的相关处理

路由传递参数基本都分为三个步骤：传递参数、声明接收参数、获取参数

传递params参数

代码语言：javascript复制

<!-- 传递参数 -->
<Link to={`/路径/${value}/${value}`}

<!-- 声明接收参数 -->
<Route path="/路径/:key/:key" />

代码语言：javascript复制

//获取参数
console.log(this.props.match.params)

传递state参数

代码语言：javascript复制

<!-- 传递参数 -->
<Link to={{pathname: '/路径', state: {key: value}}} />

<!-- 声明接收 -->
<Route path="/路径" />

代码语言：javascript复制

//获取参数
congole.log(this.props.location.state)

传递search参数

代码语言：javascript复制

<!-- 传递参数 -->
<Link to={`/路径/?key=${变量}`} />

<!-- 声明接收参数 -->
<Route path="/路径" />

代码语言：javascript复制

//获取参数
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}

代码语言：javascript复制

在路径后使用?key=value的形式传递参数，传递多个参数使用&符号连接

使用search传参时不需要声明接收参数

获取参数时search参数没有像params一样是一个对象，可使用第三方库querystring进行处理

如果是使用react脚手架搭建的项目可直接引入，否则需要使用命令安装

安装第三方库命令 npm i querystring

Tips:使用slice方法将search参数中的问号去掉

querystring

代码语言：javascript复制

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

代码语言：javascript复制

qs.stringify()方法将对象转换成urlencode编码格式
qs.parse()方法将urlencode编码格式转换成对象

search state

0 人点赞