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()]); // 依赖字符串化结果