synchronize-query-params.ts

import qs from 'query-string';
import { useHistory, useLocation } from 'react-router';

function useSynchronizeQueryParams({ topic }) {
  const { search, pathname } = useLocation();
  const history = useHistory();

  const params = qs.parse(search);

  React.useEffect(() => {
    if (!params.topic && topic) {
      const nextUrl = `${pathname}?${qs.stringify({
        ...params,
        topic,
      })}`;
      history.replace(nextUrl);
    }
  }, [topic, params, pathname, history]);
}