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.

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

Hey sg,

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

-b

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

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.

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.

1 Like