React+Node项目：搜索后如何修改URL并携带查询参数？

使用React + Node.js开发项目，搜索功能已实现：搜索词通过URL query、分类筛选通过req.body发送POST请求。需求是请求完成后更新前端URL，带上搜索参数，例如从localhost:3001/home变为localhost:3001/home?search=football&cate=sport。

利用react-router-dom的useNavigate和URLSearchParams修改URL查询参数，无需页面刷新，步骤如下：

• 提取选中的分类，转换为逗号分隔的字符串（适配URL参数格式）
• 用URLSearchParams组合搜索词和分类参数
• 调用navigate更新URL，使用replace模式避免历史记录冗余

修改后的HomePage核心代码 #

// 补充导入useSearchParams
import { useNavigate, useSearchParams } from "react-router-dom";

function HomePage() {
    // ... 原有状态保持不变
    const [searchParams, setSearchParams] = useSearchParams();
    const navigate = useNavigate();

    // 初始化：从URL读取参数恢复搜索状态
    useEffect(() => {
        const savedSearch = searchParams.get('search') || '';
        const savedCate = searchParams.get('cate') || '';
        
        setSearch(savedSearch);
        if (savedCate) {
            const cateList = savedCate.split(',');
            setBoxFilter({
                comedy: cateList.includes('comedy'),
                action: cateList.includes('action'),
                sport: cateList.includes('sport'),
            });
            // 有参数时自动触发搜索
            savedSearch || savedCate ? searchFun() : null;
        }
    }, []);

    const searchFun = () => {
        try {
            // 收集选中的分类
            const selectedCates = Object.entries(boxFilter)
                .filter(([_, checked]) => checked)
                .map(([cate]) => cate);
            const cateStr = selectedCates.join(',');

            axios.create({ withCredentials: true }).post(
                `http://127.0.0.1:3000/books/search?search=${search}`,
                { categories: boxFilter }
            ).then(res => {
                setDisplaySearch(res.data.data1);
                // 更新URL参数
                const params = new URLSearchParams();
                search && params.set('search', search);
                cateStr && params.set('cate', cateStr);
                // replace模式避免历史记录堆积
                navigate({ search: params.toString() }, { replace: true });
            });
        } catch (error) {
            console.error(error);
        }
    };

    // ... 其余方法保持不变
}

额外优化说明 #

• useSearchParams简化了URL参数的读写操作
• 初始化时读取URL参数，支持页面刷新后保留搜索状态
• replace模式确保返回逻辑符合用户预期，不会出现大量重复历史条目

内容的提问来源于stack exchange，提问作者elyasaf