Manually get or set more than one query parameter

ExampleQueryParameters.js

import React, { useEffect, useState } from "react";
import { useLocation, useHistory } from "react-router";

const ExampleQueryParameters = () => {
  const history = useHistory();
  const [state, setState] = useState(
    Object.fromEntries(new URLSearchParams(useLocation().search))
  );

  useEffect(() => {
    history.replace(
      "?" + new URLSearchParams(Object.entries(state)).toString()
    );
  }, [state, history]);

  return (
    <>
      <h2>Example</h2>
      <button onClick={event => setState({ ...state, q: Date.now() })}>
        Set "q" param to Date.now()
      </button>
      <button
        onClick={event => setState({ ...state, random: Math.random() })}
      >
        Set "random" param to a random number
      </button>
    </>
  );
};

export default ExampleQueryParameters;