如何在同一路径下替换URL查询参数？（尽量不使用useHistory()）

问题分析 #

你遇到的核心问题是：在产品列表页(/products)执行搜索时，页面重渲染后搜索参数丢失，导致无法展示对应产品。这是因为之前的实现没有正确监听搜索参数的变化，或者URL更新逻辑存在疏漏，同时没有利用React Router v6+提供的专用钩子来处理搜索参数。

解决方案 #

使用React Router v6+的useSearchParams钩子（替代手动拼接URL），结合useNavigate和useLocation来统一处理首页和产品列表页的搜索逻辑，同时确保产品列表组件能响应搜索参数的变化重新请求数据。

1. 搜索栏组件实现

import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import { useState } from 'react';

function SearchBar() {
  const navigate = useNavigate();
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (e) => {
    e.preventDefault();
    const trimmedTerm = searchTerm.trim();
    if (!trimmedTerm) return;

    // 设置搜索参数
    setSearchParams({ search: trimmedTerm });
    
    // 如果当前在首页，跳转到产品列表页
    if (location.pathname === '/') {
      navigate('/products', { replace: true });
    }
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索产品..."
      />
      <button type="submit">搜索</button>
    </form>
  );
}

2. 产品列表页组件实现

import { useSearchParams, useEffect, useState } from 'react-router-dom';

function ProductsPage() {
  const [searchParams] = useSearchParams();
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

  // 监听搜索参数变化，重新请求产品数据
  useEffect(() => {
    const fetchProducts = async () => {
      setLoading(true);
      const searchTerm = searchParams.get('search');
      try {
        const res = await fetch(`/api/products?search=${searchTerm || ''}`);
        const data = await res.json();
        setProducts(data);
      } catch (err) {
        console.error('加载产品失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [searchParams]); // 依赖searchParams，参数变化时自动触发请求

  if (loading) return <div>加载中...</div>;

  return (
    <div className="products-list">
      {products.length === 0 ? (
        <p>未找到匹配的产品</p>
      ) : (
        products.map(product => (
          <div key={product.id} className="product-item">
            <h3>{product.title}</h3>
            {/* 其他产品信息 */}
          </div>
        ))
      )}
    </div>
  );
}

关键说明 #

• useSearchParams是React Router v6+提供的专门处理URL搜索参数的钩子，能直接读取和更新参数，避免手动拼接URL的错误。
• 在产品列表页中，将searchParams作为useEffect的依赖项，确保搜索参数变化时自动重新请求API，展示最新结果。
• 使用navigate的replace: true选项，避免在浏览器历史记录中添加重复的条目，优化用户的前进/后退体验。

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