Function useCompatSearchParams

packages/lib/hooks/useCompatSearchParams.ts:5–24

()

import { ReadonlyURLSearchParams, useParams, useSearchParams } from "next/navigation";

export const useCompatSearchParams = () => {
  const _searchParams = useSearchParams() ?? new URLSearchParams();
  const params = useParams() ?? {};

  const searchParams = new URLSearchParams(_searchParams.toString());
  Object.getOwnPropertyNames(params).forEach((key) => {
    searchParams.delete(key);

    // Though useParams is supposed to return a string/string[] as the key's value but it is found to return undefined as well.
    // Maybe it happens for pages dir when using optional catch-all routes.
    const param = params[key] || "";
    const paramArr = typeof param === "string" ? param.split("/") : param;

    paramArr.forEach((p) => {
      searchParams.append(key, p);
    });
  });

  return new ReadonlyURLSearchParams(searchParams);
};