IsAvaible
commented
2 years ago - Can be solved by adding the following code to the of your router object.
history.pushState = new Proxy(history.pushState, {
apply (target, thisArg, argumentsList) {
// Code here will execute *before* the navigation (and may prevent it by return-ing early)
// ... code ...
Reflect.apply(target, thisArg, argumentsList);
// Code here will execute *after* the navigation
// ... code ...
}
})I still would appreciate official support for this!
mefechoel
eslym
Thank you for this library!
I'm looking for something like React routers Prompt.
When there is unsaved work there are three ways the user should be warned:
window.onbeforeunload: The user presses refresh in the browser or navigates to another websitenavigate: The user presses on an internal link that will change the page in the routerpopstate: The user presses back in the browser1 and 2 are solvable relatively easily.
createHistorycould allow registering callbacks for handling prompts. If any of these listeners return an unsuccessful value (as in there is unsaved work) a prompt would be displayed.3 is a bit more tricky since the browser doesn't offer a way to block the URL change. Thus on cancel we'd have to navigate back to the page the user just left. This would have to be done before the router removes anything from the page so that no state is lost. This is what react-router does, I think.
Has any work in this area been done? I'll create an implementation if you don't see anything wrong with this approach.