route.push fails to update the browser url
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
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
This is the snippet where the router updates the URL:
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:
- search term:
- category:
But whenever I try to change the page parameter, the following URL is generated:
the URL is not updated and none of the values are updated, but the browser scrolls up, like a normal redirect).
For reference some tech details:
- Nextjs 14.2.5
- App router
- Using the useReact hook from
Is there any way to force the router to make a reload? Am I missing something?
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=1But whenever I try to change the page parameter, the following URL is generated:
routing /manage/library?page=2&sort=title%7Cascthe URL is not updated and none of the values are updated, but the browser scrolls up, like a normal redirect).
For reference some tech details:
- Nextjs 14.2.5
- App router
- Using the useReact hook from
next/navigationIs there any way to force the router to make a reload? Am I missing something?