How to create Modal Routing

Hi, I’m trying to figure out how to approach this use case:

When clicking a card, open a modal, which has a set of routes that can be navigated within. This should update the URL with each change. Hitting browser back/forward should navigate the screens within the modal.

If i hit refresh or open the same URL in the browser, it’s a full-blown page instead of a modal.

1 Like

Followup q, is there a way to intercept the back button / prevent redwood router from handling it?

1 Like

Hey sg,

I don’t have a good answer, but I found this as a possible resource:

-b

1 Like

Not exactly sure what you’re asking, but the browser will keep track of the history stack. If you want to route to a page and replace top item you can use this:

navigate(routes.home(), { replace: true })

More info in the rw docs

1 Like

Thanks. An example of what I’m trying to achieve can be seen on nomadlist.com (click on cities, browse some tabs, notice the URL changes, and then refresh on a route to see it serve as a full-screen route.) as well as instagram.com web (navigate to a profile, click on a post and see how it’s a modal, and upon refresh a page.)

For now I created a custom Link component, and a context which can handle navigations with a custom navigation function, but would have liked to do it with redwood’s router.

1 Like

Hi @sgup

I think this is a very valid request. I went ahead and created a GitHub issue for it, so I can keep track of it along with other issues tagged with the router label.

2 Likes