useParams, usePathname seem useful so I started using them in the page router. not sure if this is ideal

I think that only works in the app router right?

if you use the pages router you should use next/router instead of next/navigation

Gotcha. how about the other hooks such as useParams, usePathname? would it be fine to use those in page router? seems like they are supported

any reasons you don't use useRouter().query and useRouter().pathname?

I can. There are components that might be used in both app and page router during the migration so I was trying to see if it was possible to update those components to use these hooks first

ah yes for router-agnostic hooks, useParams and usePathname work. i don't know if the window.history method works in the pages router as well, but it probably does work there.

if it doesn't work there, you can use this hook to check whether you are in the app router or the pages router and execute useRouter().push(..., { shallow: true }) or window.history.pushState(...) accordingly:

// not next/router here!
import { useRouter } from "next/compat/router";

export function useIsAppRouter() {
  // it returns the router instance if it is rendered in the pages router
  // returns null if it is in the app router
  const router = useRouter();
  return !router;
}