React 第三十三节 ReactRouter 中 useSearchParams 使用详解及注意事项

一、useSearchParams 定义 基本用法

定义：用于返回当前 URL 的 URLSearchParams 的元组和用于更新它们的函数。设置 search params 会导致导航。

import { useSearchParams } from 'react-router-dom'
export default function orderCenter() {const [searchParams, setSearchParams] = useSearchParams()// ...
}

useSearchParams() 返回两个参数：
searchParams： 当前实例的对象，这上面挂载了 获取设置等URL 参数值方法
setSearchParams：更新 searchParams 的 Set函数；

二、请求参数

例如 我们使用 useNavigate 进行跳转

import { useNavigate } from 'react-router-dom'
export default function Center() {const navigate = useNavigate()// ...const handleJump = (type) => {// 跳转订单中心navigate('/OrderCenter?id=233&name=Andy')}
}

三、使用 searchParams对象 获取URL参数

import { useEffect } from 'react'
useEffect(() => {// 获取某个参数的值searchParams.get('id') // 233// 获取某个参数的值searchParams.getAll('id') // 数组形式 [233]// 判断参数中是否包含某个属性searchParams.has('id') // 返回 布尔值 true | false// 使用 delete() 函数删除指定请求参数，如下// delete方法是否会修改原对象searchParams.delete('id') // 表示将 id 删除，再去获取id时候，发现不存在const id = searchParams.get('id') // null, 已删除// 使用 append 追加 参数searchParams.append('age',"18")console.log('===append=', searchParams.get('age')) // 18// 使用forEach() 函数迭代遍历searchParams中的参数searchParams.forEach(function(value, key) { console.log(key,value);  // 获得对应的属性 及 值 id 233 ; name Andy})// entries() 函数迭代遍历searchParams中的参数for (const [key, value] of searchParams.entries()) {console.log(key, value); // id 233 ; name Andy}// 使用 keys() 和 values() 函数迭代遍历searchParams中的键和值for(var key of searchParams.keys()) {  console.log("key:",key);  // id name}for(var value of searchParams.values()) {  console.log("value:",value);  // 233 Andy}// 使用 sort() 排序，按照键值升序const paramsQueryStr = searchParams.sort();// 使用 set() 设置请求参数searchParams.set('id', '699'); // id 由原来 233 ,变为 699，// 重新设置 参数setSearchParams({ name: 'Jane', age: 25, id: 888 })// 将URL 设置为 OrderCenter?name=Jane&age=25&id=888// setSearchParams() 的第二个参数 setSearchParams(newParams, { replace: true })// 当{replace: true}时，URL的变化不会产生新的历史记录条目，而是替换当前的。// 对于避免用户多次点击返回按钮才能回到之前的状态很有用}, [])

四、示例

1、分页组件：

    function Pagination() {const [searchParams, setSearchParams] = useSearchParams();const page = Number(searchParams.get('page')) || 1;const handleNextPage = () => {setSearchParams({ page: page + 1 });};return <button onClick={handleNextPage}>Next</button>;}

2、搜索表单：

    function SearchForm() {const [searchParams, setSearchParams] = useSearchParams();const [query, setQuery] = useState(searchParams.get('q') || '');const handleSubmit = (e) => {e.preventDefault();setSearchParams({ q: query });};return (<form onSubmit={handleSubmit}><input value={query} onChange={(e) => setQuery(e.target.value)} /></form>);}

五、注意事项

1、参数类型处理：
URL 参数始终是字符串。需手动转换数字、布尔值等类型：

    const page = parseInt(searchParams.get('page'), 10) || 1;const isActive = searchParams.get('active') === 'true';

2、避免直接修改对象：
searchParams 是只读的，修改需通过 setSearchParams 创建新对象。

3、编码与特殊字符：
URLSearchParams 自动处理编码，无需手动处理。

4、默认参数设置：
可在组件挂载时设置默认值（如无参数时）：

    useEffect(() => {if (!searchParams.has('page')) {setSearchParams({ page: '1' }, { replace: true });}}, []);

5、性能优化：
使用 useMemo 或条件检查避免不必要的计算：

    const filter = useMemo(() => ({query: searchParams.get('q') || '',}), [searchParams.toString()]); // 依赖字符串化结果