Manually getting and setting query parameter in a component

ExampleQueryParam.js

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

const ExampleQueryParam = () => {
  const history = useHistory();
  const location = useLocation();
  const [q, setQ] = useState(new URLSearchParams(location.search).get("q"));

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

  return (
    <>
      <h1>Example</h1>
      <button onClick={event => setQ(Date.now().toString())}>
        Set "q" param to Date.now()
      </button>
    </>
  );
};

export default ExampleQueryParam;