reactRouterV6 之 useSearchParams使用方法_usesearchparams获取所有参数

reactRouterV6 之 useSearchParams使用方法

一、引入 useSearchParams

// search 接参数时引用的
import { useSearchParams } from "react-router-dom";  
1
2

二、请求参数：

请求参数是 id=01&title=message1&content=消息1
1

三、使用 useSeachParams() 解析参数

let [searchParams, setSearchParams] = useSearchParams();    
1

四、使用 searchParams 中的函数，如下：

// 1.使用 get() 或者 getAll 函数获取请求参数，如下
const id = searchParams.get('id')       // 字符串： 01
const id = searchParams.getAll('id')    // 数组： ['01']

// 2.使用 has() 函数判断请求参数是否存在查询的属性,如下：
const isHasId = searchParams.has('id') // true 或者 false

// 3.使用 delete() 函数删除指定请求参数，如下
searchParams.delete('id')
const id = searchParams.get('id') // null,已删除

// 4.使用append() 函数追加到searchParams数组中，如下：
searchParams.append('desc',"1111111")
const desc = searchParams.get('desc') // 1111111

// 5.使用forEach() 函数迭代遍历searchParams中的参数
searchParams.forEach(function(value, key) { 
    console.log(key,value);  
});

// 6.使用 keys() 和 values() 函数迭代遍历searchParams中的键和值
for(var key of searchParams.keys()) {  
    console.log("key:",key);  
}

for(var value of searchParams.values()) {  
    console.log("value:",value);  
}

// 7. 使用 sort() 排序，按照键值升序
const paramsQueryStr = searchParams.toString();     //返回： id=01&title=message1&content=%E4%BD%A0%E5%A5%BD1

// 返回适合在URL中使用的查询字符串
searchParams.sort();
const paramsQueryStr = searchParams.toString();  //返回：content=%E4%BD%A0%E5%A5%BD1&id=01&title=message1

// 8. 使用 set() 设置请求参数
searchParams.set('id', 'def'); // id 由原来 01 ,变为 def，

// 9. 使用 entries()方法返回一个迭代器，该迭代器允许迭代对象中存在的所有键/值对
const arr1 = [6, 4, 3]; 
console.log('entries:',Object.entries(arr1));
//返回值：
0: ['0', 6]
1: ['1', 4]
2: ['2', 3]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46