router.query not updated after router.push in next/router

Question

I have an issue I need to get query params after they are updated.

In this example when I make the console.log the router.query is reset to an empty object (and the route is been updated).

Why? What am I missing?

When I make router.push(/foo?page=1) it works!

Is it a bug ?

codesandbox link

import { useEffect } from "react";
import { useRouter } from "next/router";

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

  useEffect(() => {
    console.log("router.query change", router.query);
  }, [router.query]);

  const changeRoute = () => {
    router.push("/foo", { query: { page: "1" } });
  };

  return (
    <div>
      <button onClick={changeRoute}> change route</button>
    </div>
  );
}

Answer 1

You're not using router.push correctly, the second argument where you're passing the query object is meant for the as parameter used to decorate the path.

If you want to use the URL object format to do the same as router.push("/foo?page=1"), then your code should look like the following.

router.push({
    pathname: "/foo",
    query: { page: "1" }
});