How do I replace queries in the URL when on the same path? | Without useHistory() if possible

I have a page that displays products returned from my API based on the URL's search parameters. For example, '/products?search=socks' would return products with the word socks in the title. The search bar is located in the header. If I search for a product on the home page (a different path: '/'), it navigates to the product list page and displays the products. However, if I search for a product on the product list page (the same path: '/products'), it re-renders and removes the search parameters, leading to no products being displayed. I prefer to use current hooks as it appears useHistory is outdated.

I have tried to navigate to the URL directly:

navigate(`/products?search=${search}`);

And I have tried to set the parameters as one source suggested:

const params = new URLSearchParams();
params.set('search', search);
navigate(`/products?search=${search}`);

I expected the query/search parameter to replace the search value and re-render with the new results.

I would use the new React Router V6 useSearchParams hook:

import { useSearchParams } from 'react-router-dom'

Then instantiate the hook at the top of your component:

let [searchParams, setSearchParams] = useSearchParams();

Then you can manipulate the search params anywhere, in your case:

setSearchParams({ search: '...' );

Doing this along-side the navigate() call will basicallly lead the user to the page as the search param is being changed.

In your situation, I would detect if the user is already on the product list page before always running navigate(). You can use the useLocation() hook to detect what pathname you currently are on.

If you're on the product list page already, don't run navigate(). Your useEffect would be responsible for re-rendering the page when search params change using a dependency array [searchParams.search]:

useEffect(() => {
  // do stuff when search params "search" variable changes
}, [searchParams.search])