useSearchParams

Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them. The object is a proxy so you must access properties to subscribe to reactive updates. Note values will be strings and property names will retain their casing.

The setter method accepts an object as an input, and its key-value pairs will be merged into the existing query string. If a value is '', undefined or null, the corresponding key will be omitted from the resulting query string. The updates behave like navigation and will not scroll the page to the top. Additionally, the setter can take an optional second parameter, the same as navigate, to control the navigation behavior and auto-scrolling, which are disabled by default.

const [searchParams, setSearchParams] = useSearchParams();

return (
  <div>
    <span>Page: {searchParams.page}</span>
    <button
      onClick={() =>
        setSearchParams({ page: (parseInt(searchParams.page) || 0) + 1 })
      }
    >
      Next Page
    </button>
  </div>
);