Ability to push changes to url without re-rendering #18072
-
I am working on a project that has a page which works similar to google maps. As a user zooms/moves the map around, the url should be replaced with the updated center latitude and longitude values. The url looks something like this: And as the map is moved, these values change. I've been trying to use the nextjs router So either:
Is there any way that I can use NextJS routing to basically say: I want to update the url to |
Beta Was this translation helpful? Give feedback.
Replies: 11 comments 40 replies
-
Do you mean React internally renders again? Or do you mean the page refreshes/reloads and visually repaints? Also, have you taken a look at shallow routing? |
Beta Was this translation helpful? Give feedback.
-
Leaving this comment here in case others have the same question in the future: I ended up going with
for when I wanted to update the url without doing any re-rendering. I also check against Specifying |
Beta Was this translation helpful? Give feedback.
-
Having the same re-renders on I ended up creating the next-replace-url npm package to support this functionnality. Browser action like back button works for me, no full page refresh. |
Beta Was this translation helpful? Give feedback.
-
I am using:
as suggested but it looks like the re-rendering is still happening. using app router, next version 13.4.10 |
Beta Was this translation helpful? Give feedback.
-
I tried this but the back button isn't working for me. |
Beta Was this translation helpful? Give feedback.
-
Neceisto hacer esto pero con link en nect 14, la prop shallow de Link no funciona para rsc |
Beta Was this translation helpful? Give feedback.
-
Is there any update after the next 14 with app router? |
Beta Was this translation helpful? Give feedback.
-
I have one issue with pages router when i click on the redirection then my page is refresh Why it behave like this in next js |
Beta Was this translation helpful? Give feedback.
-
Has the issue with Next 14 and router.push/router.replace no longer accepting "{ shallow: true } still not been addressed? |
Beta Was this translation helpful? Give feedback.
-
I am using Next 14.2.5.
|
Beta Was this translation helpful? Give feedback.
-
Any input on this from the official team? As doing a workaround like this seems like a bad practise, considering this functionality was working fine in page router
|
Beta Was this translation helpful? Give feedback.
Leaving this comment here in case others have the same question in the future:
I ended up going with
for when I wanted to update the url without doing any re-rendering. I also check against
Router.pathname
and only usehistory.replaceState
when remaining on the same page. Otherwise I use the nextjs Router.Specifying
window.history.state
is mandatory because it maintains some nextjs state internals. If you pass{}
instead ofwindow.history.state
, moving forward/back will potentially be broken. This was the hardest issue for me to fix.