useSearchParams not updating when using useNavigate

[awilliams-qcells]

When using useNavigate to update the query params/path of the url, I am seeing useSearchParams fail to pick up the change (i.e. if there were no query params initially, there will still be no query params after the url in the browser has changed). I am using version 6.22.1 and the relevant parts of my code look like this:

import { useCallback, useState } from "react";
import queryString from 'query-string';
import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom";

interface CategoryBoxProps {
  icon: IconType;
  label: string;
  selected?: boolean;
  description?: string;
}

const CategoryBox: React.FC<CategoryBoxProps> = ({
  label
}) => {
  let [searchParams, setSearchParams] = useSearchParams();
  let [currentQuery , setCurrentQuery] = useState(queryString.parse(searchParams.toString()));
  const navigate = useNavigate();

  console.log('STARTING QUERY PARAMS', {searchParams: currentQuery});
  
  const handleClick = useCallback(() => {
  
    if(searchParams) {
      setCurrentQuery(queryString.parse(searchParams.toString()));
    }
    
    const updatedQuery: any = {
      ...currentQuery,
      category: label
    };

    if(searchParams.get('category') === label) {
      delete updatedQuery.category;
    }

    console.log('Updated query after delete', { 
      label, 
      searchParams: searchParams.getAll('category'),
      searchParamsCat: searchParams.get('category'), 
      updatedQuery, 
      searchParamQuery: createSearchParams(updatedQuery).toString()
    });
    
    setSearchParams(updatedQuery);
    navigate({
      pathname: '/',
      search: createSearchParams(updatedQuery).toString()
    });
  
  }, []);
  return (
    <div onClick={handleClick}>
      <div>
        {label}
      </div>
    </div>
  );
};

export default CategoryBox;

You'll see that the STARTING QUERY PARAMS never update after redirecting to the page using useNavigate. Any help or advice would be greatly appreciated

[kiliman]

I'm not sure I fully understand your example, but it looks like you want to navigate to the the route after the search params are updated.

You don't have to use useNavigate for this. By calling setSearchParams it will update the current location with new params and React Router will automatically navigate.

Here's an example where you can check multiple categories and each time, it will update the search params and navigate/re-render.`

const categories = ['Meats', 'Dairy', 'Fruits', 'Vegetables', 'Bread'];
function Home() {
  let [searchParams, setSearchParams] = useSearchParams();
  let location = useLocation();
  let data = {
    location: `${location.pathname}${location.search}`,
    params: {
      category: searchParams.getAll('category'),
    },
  };
  const handleClick = (e) => {
    const category = e.target.value;
    if (searchParams.has('category', category)) {
      searchParams.delete('category', category);
    } else {
      searchParams.append('category', category);
    }
    setSearchParams(searchParams);
  };
  return (
    <div>
      <h2>Home</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {categories.map((category) => (
          <label key={category}>
            <input
              type="checkbox"
              name="category"
              value={category}
              checked={searchParams.has('category', category)}
              onClick={handleClick}
            />
            {category}
          </label>
        ))}
      </div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

⚡️ StackBlitz https://stackblitz.com/edit/github-sisqrx?file=src%2FApp.tsx

📖 MDN https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

[awilliams-qcells]

I have tested the one you have sent in the StackBlitz and found it working, but when I attempt to replicate this in another project locally (even a new one), I get an error (not from typescript, but from the browser and the terminal) saying Expected 1 arguments, but got 2. for searchParams.has('category', category)}. There may be more prep I need to do that I'm not aware of?

[kiliman]

The 2-param version of URLSearchParams.has and .delete were introduced in Node.js v20.2.0, v18.18.0

https://nodejs.org/api/url.html#urlsearchparamshasname-value

As for browser compatibility

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/has

If you can't upgrade, then here are replacement functions:

function hasSearchParam(params: URLSearchParams, name: string, value?: string) { 
  return typeof value === 'undefined' 
    ? params.has(name) 
    : params.getAll(name).includes(value)
}

function deleteSearchParam(params: URLSearchParams, name: string, value?: string) { 
  if (typeof value === 'undefined') {
    params.delete(name)
    return
  }
  const values = params.getAll(name).filter(v => v !== value)
  if (values.length) {
    params.set(name, values) // replace with new values
  } else {
    params.delete(name) // no more values so delete name
  }
}

[awilliams-qcells]

The replacement functions worked for me, but I was starting the project in create react app so upgrading didn't work at first. I had to switch the project over to vite (both small and larger one) to get the original way to work!