Replies: 7 comments 2 replies
-
|
I have the same issue, did you find something to to solve your problem? |
Beta Was this translation helpful? Give feedback.
-
|
Facing same issue... I saw this solution from this other thread, but feels like an unelegant & hacky way of doing things that probably have negative implications (but I'm not as an expert to tell what those would be...):
|
Beta Was this translation helpful? Give feedback.
-
|
I had the same problem and after two days of reading hundreds of posts about this issue, I found out the solution. I am a little bit sad because it's extremely simple. Import the redirect Use this magic line of code that will change URL without rerender (https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) Use redirect (https://nextjs.org/docs/app/api-reference/functions/redirect) I hope it will help 👍 |
Beta Was this translation helpful? Give feedback.
-
have you get solution for this ? |
Beta Was this translation helpful? Give feedback.
-
|
Approach to the Problem : This problem especially got me for pages based routing, so you have to wrap the provider for respective page also. |
Beta Was this translation helpful? Give feedback.
-
|
I was using |
Beta Was this translation helpful? Give feedback.
-
|
Just to help to others. If you found this situation. Where you want to keep the history. Eg: navigation google maps , you have the problem when nextjs renders again the whole page and "Eg google maps" , use native push state, and set a native popState listener, and set the state. you will work outside the router. but keeping react state and native browse history useEffect(() => {
window.addEventListener('popstate', handleUpdateFromParams);
return () => {
window.removeEventListener('popstate', handleUpdateFromParams);
};
}, [handleUpdateFromParams]); |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I seem to be in a Catch 22 situation when using Next.js 13's new app directory routing because conflicting requirements need my root layout to be server side and client side rendered respectively (which obviously can't be the case).
I have a Next.js 13.3 app using the app directory and a context provider wrapped around a descendent of
app/page.tsxto provide access to state. At that level, when I perform arouter.pushI get a re-render ofapp/page.tsx, which resets my state that I get via the provider. This state was modified elsewhere, and I don't want it reset.I can move the provider higher up, so a re-render doesn't trigger it, but that conflicts with another provider.
Additional information
Prior to the new app directory routing, I think the solution would have been to use shallow routing, but Next.js 13's new routing doesn't have such an option.
At first glance, the solution is to move the provider higher up into
app/layout.tsx, which doesn't get re-rendered. However, this then requires me to make the layout a client side only component (because the provider uses state), and in my app, I need that layout to be server side rendered so I can wrap it in a ClerkProvider for auth purposes.I can't quite wrap my head around how to structure things so that I can have a server side rendered layout, and a client side rendered provider, and have the provider state persist when the router pushes a new route. I think need a server side rendered component higher than
app/context.jsto wrap my ClerkProvider around.Example
I've put up an example to show the problem.
https://codesandbox.io/p/github/jschuur/context-router-next13/main
Click the button and you can see the layout wrapped provider shows a state of 'abc' after the route change as desired. The page based provider on the other hand only briefly shows 'abc' and quickly resets back to '(intialized value)' after re-rendered. Click it again and they are both in sync, because the page URL didn't change, so a page re-render didn't occur.
Full code also at https://github.com/jschuur/context-router-next13
Beta Was this translation helpful? Give feedback.
All reactions