如何在React中更新url中的查询参数？

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

const MyComponent = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  // 使用queryParams对象来获取和修改查询参数
  // 例如：const value = queryParams.get('paramName');
  //       queryParams.set('paramName', 'paramValue');
  
  return (
    // 组件的JSX代码
  );
};

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

const MyComponent = () => {
  const history = useHistory();
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const updateQueryParam = (paramName, paramValue) => {
    queryParams.set(paramName, paramValue);
    history.push({ search: queryParams.toString() });
  };

  return (
    // 组件的JSX代码
  );
};