React Router 6, handling multiple search parameters at once

Question

I already used setSearchParams hook in Parent component , which set query depending on input from input JSX element. Now , I need to implement second search param = sortBy , but not to erase already or might be existing query search param I need to perform each time If() chech. And also I will need if() checks in parent elements now for sortBy param. And potentially I might introduce few more search params in different React components - this will clutter the code.

Is there a better approach to handle multiple search params scattered through your project with React Router 6?

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

const titles = ['Name', 'Sex', 'Born', 'Died', 'Father', 'Mother', 'Slug'];

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    
      {
        titles.map(el => (
           {
              if (query) {
                setSearchParams({ query, sortBy: el.toLowerCase() });
              } else {
                setSearchParams({ sortBy: el.toLowerCase() });
              }
            }}
          >
            {el}
          
        ))
      }
    
  );
};

user_8690857 · Answer

If I'm understanding your question/issue you simply want to add another query parameter to the existing queryString. You can update the current searchParams object and use that instead of setting the search params to an entirely new value.

Example:

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    
      {titles.map(el => (
         {
            searchParams.set("sortBy": el.toLowerCase());
            setSearchParams(searchParams);
          }}
        >
          {el}
        
      ))}
    
  );
};

React Router 6, handling multiple search parameters at once

1 Answers