Imagine we have the following two routes:
viewRoute = {
name: "View Route",
pattern: "/route/view"
}
editRoute = {
name: "Edit Route",
pattern: "/route/edit",
beforeExit: (fromState, toState, routerStore) => {
if (/* route change was triggered by browser button */) {
if (confirm("Do you want to discard changes?") {
return toState;
}
else {
return fromState;
}
}
}
}
If the user redirects from "edit" to "view" route by clicking "cancel" or "save" buttons, I don't want to show the discard-confirm dialog. But if they use the browser buttons, I do.
How can I determine within a route transition hook whether that route change was triggered by a browser button? Or alternatively, by a direct call to routerStore.goTo()?
I found a way to identify if a route was changed via button click, by leveraging RouterState.options to pass custom state to the transition hook.
From component:
const Component = () => {
const cancelEditing = () => {
routerStore.goTo("Edit Route", {}, {ignoreDiscard: true});
}
return <button onClick={cancelEditing}>{"Cancel"}</button>;
}
From Transition Hook:
beforeExit: (fromState, toState) => {
if (!toState.options.ignoreDiscard) {
if (confirm("Do you want to discard changes?") {
return toState;
}
else {
return fromState;
}
}
}
This state isn't persisted, so clicking browser back/forward buttons will always result in a dialog popup.
Unfortunately this method can only be achieved by calling RouterStore.goTo() directly as there's no prop on RouterLink called options.