-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Persisting React state between route navigation #590
Comments
Currently it's kind a hard to have this. Currently, I hope we could do something with a custom document. |
Maybe save the current state in localstorage and if it exists load it from there on the next page? |
@Mike3run That's not what @viankakrisna is asking. But @viankakrisna is asking about the React state. Because of that, his iframe inside the common component getting re-rendered again. |
@arunoda I'm testing your suggestion with custom document:
But getting this error:
It seems that the pages cannot see the Provider. |
Are you sure he's asking about React state vs a re-usable global store ? |
@rauchg I figured it based on this comment:
Anyway, @viankakrisna could you send us a sample repo. May be we could think something to do. |
@rauchbg yes, i'm talking about react state. Sorry if it's not clear enough. @arunoda, will do when i get home. Like you said, I think the issue is it always renders new React component on route changes. Can we treat the pages as the children of the Document? So the main shell shouldn't be recreated every route changes. ps: sorry for my english, not a native :( |
@viankakrisna let's see what we can do with the example. |
Closing because of inactivity. |
Next.js is great for SSR and code-splitting. It's on path to be an amazing framework. But I had the same issue as @viankakrisna while making an audio player webapp. It would be great if you guys could do something about it. For reference, here is the github repo the player app : |
@adarshsingh1407 for now you can do this by wrapping all these functionalities into a single page and use our custom routing API to do custom URLs. |
@arunoda So I would have one page that conditionally renders a view from
? Can you please elaborate on what you mean by custom API routing and how we can accomplish that with Next? |
do you have a solution for this problem using a custom express server?
routes.js:
routing this way i can apply express middlewares to my routes. but everytime i load a new page my redux state is gone |
Heeey! @timneutkens this might be interesting to add to your checklist for v6 ;) |
I believe that this should work now using custom |
example exists? |
So have I got it right if I'd say that this isn't possible as of yet? |
@adarshsingh1407 Did you reach a consolation to continue playing music while navigating between pages? |
I came up with a solution. It has some issues but does work. Here's a gist - https://gist.github.com/GusRuss89/df05ea25310043fc38a5e2ba3cb0c016 |
if you use a custom
it is possible using the custom |
I solved similar problem with this: https://nextjs.org/docs/basic-features/layouts Just make a HOC wrapped the whole _app and set what you want to do in the HOC. |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
I have followed the redux example, and rendering an iframe inside a shared component. but it seems that the Provider component always rerender the app every time the route changes and triggers the iframe to reload. I want it to persist. Is it possible?
The text was updated successfully, but these errors were encountered: