I have a bizarre situation where the route push is not working on some query parameters but it does in others.
It’s a pure client page component that contains some search parameters and displays a paginated sorted table with data. Whenever a search parameter, page, or sort changes I rebuild the URL to reflect the state, and that triggers rerender and a new call to the API.
It all works fine except for the page query parameter which doesn’t trigger any change, but when any other query parameter changes it renders properly in the URL.
This is the snippet where the router updates the URL:
const query = createURLSearchQueryString(...);
const newURL = `${pathname}?${query}`;
console.log("routing ", newURL);
router.push(newURL);
So I can see the new URL is formed correctly, and in these examples, it works fine (does a full rerender and gets the new values from the URL):
- sorting:
routing /manage/library?page=1&sort=title%7Cdesc
- search term:
routing /manage/library?s=cat&page=1&sort=title%7Casc
- category:
routing /manage/library?s=cat&sort=title%7Casc&category%3AGenre%5B%5D=Action+%26+Adventure&page=1
But whenever I try to change the page parameter, the following URL is generated:
routing /manage/library?page=2&sort=title%7Casc
the URL is not updated and none of the values are updated, but the browser scrolls up, like a normal redirect).
For reference, here are some tech details:
- Nextjs 14.2.5
- App router
- Using the useReact hook from next/navigation
- All client-side (no SCP involved)
Is there any way to force the router to make a reload? Am I missing something?