I need help with Parallel Routes
Unanswered
zzz posted this in #help-forum
zzzOP
I am designing an application where I have several modals that need to communicate with each other. I was looking at this part of the documentation: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals and I thought it would be the best solution. The problem is that I need that when I refresh the page it doesn't take me to a different path, I just need the modal logic. For example in: https://nextgram.vercel.app/ when I open a photo it appears as if it was a modal and when I restart the page it takes me to a different path and the logic of the modal is lost. In conclusion I only need the logic of the modal and not that when refreshing it redirects me to another page.
15 Replies
If you don’t want your page to be redirected when you refresh then parallel routes + intercepted routes isn’t the way.
Next.js router basically updates the URL to match the new URL you’re navigating to but to the user it seems like a modal showing upon the current page.
But what’s actually happening is a navigation to that new route and that’s why when you refresh Next.js can’t do anything because you were already in that new URL you just can’t see it visually.
Next.js router basically updates the URL to match the new URL you’re navigating to but to the user it seems like a modal showing upon the current page.
But what’s actually happening is a navigation to that new route and that’s why when you refresh Next.js can’t do anything because you were already in that new URL you just can’t see it visually.
When you close the model you’re navigating backwards, effectively to return to the previous page where you clicked it
zzzOP
I understand, thank you very much for the information
@LuisLl If you don’t want your page to be redirected when you refresh then *parallel routes + intercepted routes* isn’t the way.
Next.js router basically *updates the URL to match the new URL you’re navigating to* but to the user it seems like a *modal showing upon the current page*.
But what’s actually happening is a navigation to that *new route* and that’s why when you refresh Next.js can’t do anything because you were already in that new URL you just can’t see it visually.
zzzOP
And what do you think is the best way? Using states or with query params?
Or maybe centralizing in a global state with Zustand or react context?
If you want/need to share the URL of the page and have it be the same for everyone then you should make the URL the source of truth
@LuisLl If you want/need to share the URL of the page and have it be the same for everyone then you should make the URL the source of truth
zzzOP
I think it's interesting to make the url the source of the truth, but it's not a requirement in my case. If the decision is only to make it as easy as possible, what is the best way?
Have in mind that all state gets lost when you refresh the page. Only state that will persist is URL state or Server state (if you pull data from a DB or local storage or whatever)
@zzz Or maybe centralizing in a global state with Zustand or react context?
If you store state in Zustand or React Context this will get lost when you refresh the page, unless you persisted it somewhere
You might decide where to persist this state in case you want it to persist across refreshes, either the URL or external sources.
zzzOP
Yes, I understand that the states are lost, but as I tell you it is not a problem in my case. I just need an easy way to communicate several manners with each other.
For example, I have a modal with several options and according to the options that are chosen one modal or another appears (as if it were a multi step form)
Oh you should have started there lol I got it now that you mentioned the multi step form.
In this case you could definitely keep state in Zustand and have each component update certain state and also keep track of which step is currently active in order to render the appropriate component.
In this case you could definitely keep state in Zustand and have each component update certain state and also keep track of which step is currently active in order to render the appropriate component.
zzzOP
Thanksss
@zzz Thanksss
Solved?
Mark the solution if there was one!
Mark the solution if there was one!