Prompt on back button navigation

This issue has been tracked since 2021-01-14.

react-router has Prompt widget to handle back button navigation from pages where the user has un-saved data.
There was a related issue in the past where the use of onbeforeunload was suggested as a solution. I've tried that and could not get it to work.
React-router works differently and I think that approach could be applied here. Basically it lets the navigation happen but the routing wrapper keeps the previous route active and brings up a prompt dialog to ask if the user really wants to navigate away.
If the answer is no, it pushes the route back on the history and no data is lost. If the answer is yes, then the back route becomes active.

Would it be possible to do the same here? A non DOM-element component that would only manipulate variables in the top router context/store could do the job, I think.

iluuu1994 wrote this answer on 2021-09-13

onbeforeunload will only work for cases when the user navigates away without the router (reload, link to a different website, link that isn't a <Link /> or use:link). Unfortunately svelte-routing doesn't provide a way to listen to location changes.

One way to achieve this would be by passing the location store as a slot property here:

<slot {location}></slot>

Alternatively the context keys could be exported so that they are accessible from outside the svelte-routing library.

I'm guessing this wasn't done to not expose too many implementation details, or to avoid mutation of internal state? If so, is there a preferable solution? I'd like to create a PR if you provide some more details.

iluuu1994 wrote this answer on 2021-09-14

It's not quite as easy as I thought because not only do you need to listen to changes of the url but you need to intercept some other events, like popstate and beforeunload. It's currently not possible in this library because much of the internals are hidden.

It's not possible in svelte-navigator (a fork of this router) either but more of the internals is exposed which allowed this to be implemented more easily. I created a PR here but whether this will get merged is unclear at this point.

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date