Why don't my query params exist when using useRouter? nextjs - next.js

Question

I have a nextjs route that is being hit. Here is the url
localhost:8080/eft-files/133722?enableRegen=true.
In my /pages folder, here is the code I am using to get the query params.
const EftFileViewWrapper = () => {
const {
query: { eftFileId, enableRegen }
} = useRouter();
return (
<EftFileView
eftFileId={eftFileId}
enableRegen={enableRegen}
/>
);
};
When the app routes via a next/link, initially the enableRegen is true, but this file gets hit a second time and enableRegen is then undefined. eftFileId is always populated.
If I do a hard refresh on the page, and don't route to it via a next/link, I always get the right values for all query params.
I have had to use URLSearchParams to make this work, like this:
const EftFileViewWrapper = () => {
const {
query: { eftFileId, enableRegen }
} = useRouter();
let params = isInBrowser && new URLSearchParams(location.search);
return (
<EftFileView
eftFileId={eftFileId}
enableRegen={enableRegen || params.get("enableRegen")}
/>
);
};
I would rather stay in the nextjs ecosystem, but am not sure what to do. Any ideas?

Answer 1

useRouter works only with paths and doesn't parse query params.
I suggest you use window.location in order to obtain the search params and then parse it with URLSearchParams. Of course, check that the window object is presented:
let enableGen = false
if (typeof window !== "undefined") {
const params = new URLSearchParams(window.location.search)
enableGen = params.get("enableRegen")
}