Nextjs 13 useSearchParams returns null when using the ‘as’ prop in

I am trying to add a page id to each page in Nextjs 13 using the App Router. So I have created a custom link and I am using the as value to mask the url.

let pid = 0 // this will dynamically increase for every page but I will spare you all of that code
<Link href={`/?pid=${pid}`} as="/">
  Home
</Link>

So then in previous versions with the Pages Router you could do the following and get the pid just fine. I just tested this and it works fine.

const router = useRouter()
console.log(router.query)

// result { pid: 1}
// url show in browser http://localhost:3000

As you can see in the above example I am able to get the pid query params and not display them in the address bar. Now using the useSearchParams() hook with the App Router it just returns null every time. Did they remove this functionality from Nextjs 13? I don’t see any documentation on this when looking at either the Router docs or the Link docs for either the Pages/App respectively. Router Docs – Link Docs.

I am trying to keep track of page specific data and it seems like Nextjs is trying as hard as they can to make this difficult.

— a bit of a rant feel free to ignore —

You can’t use the window.history.state because they just override this wiping anything you save away. In previous versions they would save a page key in the window.history.state so you could at least use that but now they have taken that away. So I could just leave the pid in the url but that would make a whole new set of challenges and it obviously doesn’t look as good. I know this last paragraph was a bit of a rant but I have been frustrated Nextjs’s attitude when it comes to window history for a long time and I am about to just go into the source code and change it so they just copy over existing window history state instead of completely overriding it so I can add a page id to the window history.