JIYIK CN >

Use React Router to remove query parameters:

1. Use useSearchParamsthe hook to get the search parameters for the current location.
2. Use delete()the method to remove each query parameter, for example searchParams.delete('q').
3. Update the search parameters, setSearchParams(searchParams)e.g.

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

export default function App() {
  const [searchParams, setSearchParams] = useSearchParams();

  const removeQueryParams = () => {
    const param = searchParams.get('q');

    if (param) {
      // 👇️ delete each query param
      searchParams.delete('q');

      // 👇️ update state after
      setSearchParams(searchParams);
    }
  };

  const handleChange = event => {
    setSearchParams({q: event.target.value});
  };

  console.log(searchParams.get('q'));

  return (
    <div>
      <button onClick={removeQueryParams}>Remove query param</button>

      <input id="search" autoComplete="off" onChange={handleChange} />
    </div>
  );
}

We can use useSearchParamshooks to manage query parameters in React Router v6 and above.

This hook is used to read and modify the query string in the URL of the current location.

It returns an array with 2 elements - const [searchParams, setSearchParams] = useSearchParams().

The first element is an object that we can use to get the value of the query parameter, and the second element is a function that takes an object of key-value pairs and sets the query parameter to that object.

setSearchParamsThe function works similarly to useNavigatethe navigate function in the hook, but only applies to the search portion of the URL.

We must use URLSearchParams.delete()the method to remove each query parameter.

请注意, it is not enough to just remove the query parameters. We have to call setSearchParamsthe method, e.g. setSearchParams(searchParams)after we remove the query parameters.

The method we useSearchParamsreturn from the hook setSearchParamsis used to update the route's query parameters.