Modal based dynamic routing

[MarianoArg]

Hi there! I need to build a navigation system with the following scenario:
One Main screen, let's suppose is user/index.js
And then several screens in different routes, something like user/[...routes].js.

I need to open those routes in a modal, with the main screen behind (like Instagram does), I did that, but I also need to keep the same on refresh. All the examples I'm reading about this, works fine if you want to have a dedicated route on page reload, but I just need to have de main screen behind and the modal open on refresh too.

Any ideas?

Thanks!

[jamesmosier]

Does this example help? https://github.com/zeit/next.js/tree/canary/examples/with-route-as-modal

Additionally there was this Discussion which might have some good info: #11625

[MarianoArg]

Thanks for answer @jamesmosier. Yes I followed that example, and thanks to it I could make the routes open in a modal, everything great until there, but when I refresh the page, the modal disappears and the route just open as a normal page. I need it to open in a modal with the main screen behind when refresh too.

[cdock1029]

You will have a component that will be repeated in index, and all [...routes], what you are calling your "main screen" component.

Just duplicate that within [...routes].js file. Additionally, render a Modal component in [...routes].js with a useState controlled "open" (or whatever) parameter initialized to true. That way you can still toggle it closed (or navigate away...animating this might be tricky. Close, then navigate perhaps) but it will render initially in the open state. Your desired solution is easier than the examples you've seen trying to achieve a hybrid approach.

edit: although instead of toggling it closed, probably you just want to navigate away from route

[MarianoArg]

That's how I resolved it, thank you! I just added like a workaround,
import Page from './[...routes]'; export default Page; in my index.js

It's working ok now, there is an open issue with this, I think a we'll have a nice solution soon: #10488

Thank you again!