changing query params with route.push

[stefanprobst]

i want to change query params on the same route programmatically with route.push, and i'm confused that of the following five examples, only the first and last seem to be allowed:

import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();

  return (
    <div>
      <button
        // this works
        onClick={() => {
          router.push({ pathname: router.pathname, query: { filter: "one" } });
        }}
      >
        Works
      </button>
      <button
        // this does not work
        onClick={() => {
          router.push({ query: { filter: "two" } });
        }}
      >
        Error
      </button>
      <button
        // this does not work
        onClick={() => {
          router.push("?filter=three");
        }}
      >
        Error
      </button>
      <button
        // this does not work
        onClick={() => {
          router.push(`${router.pathname}/?filter=four`);
        }}
      >
        Error
      </button>
      <button
        // this works
        onClick={() => {
          router.push(`${router.pathname}?filter=five`);
        }}
      >
        Works
      </button>
    </div>
  );
}

[jamesmosier]

Is there one specifically that you want to use out of the ones that do not work?

Usually when I think about changing query params for the same page, I think about shallowRouting by doing something like:

router.push('/?filter=five', undefined, { shallow: true }

[stefanprobst]

i'm just trying to figure out why some of those won't work (e.g. why explicitly providing a pathname is necessary).
initially, i had tried router.push({ query: { filter: "two" } }) and was surprised to get an error message.