How do you handle "back button" without having the LiveView mounting again?

Hello everybody,

I have an application where I have many LiveComponents within the same Liveview and the same route/url.
So I’m managing manually all the steps and states of components…

Now I have a use case where I can display a TOS in full page like a modal from any LiveComponent.
I could have managed it the same way (though it’s a bit overwhelming to manage all the steps manually)…
But I wanted to let the user be able to dismiss the TOS using it’s browser back button (particularly convenient for mobile with swipes).

So the only solution I found for that was to use a dedicated route and using live_patch so that I can come back to the previous route.

However, I just noticed that this trigger a whole new mounting, thus losing every state.

I precise that the TOS and the LiveComponents are within the same LiveView.
If I put a live_patch link to the previous route manually for testing purpose, I have the states kept correctly.

Now I can track manually every route/url of the pages where the user is before displaying the TOS so that I can redirect (with live_path) him back to where it was. But that will not solve the browser back button issue.

While I’m here isn’t there a way to keep track of the previous path by default in the socket?

Anyway, maybe I’m doing something wrong with how I organize my LiveView/LiveComponent…

How would you do that?

I’m thinking of going back to handle every view on theirs own routes but it was cool to have everything done in the same route (for related actions)

1 Like

Ok,

I figured out that I will need to push_patch https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#push_patch/2 to be able to let the browser go back without mounting.

It’s very interesting…

4 Likes

By the way, I created an example Phoenix application to observe LiveView’s behavior for push_patch and push_redirect.

4 Likes