javascriptreactjsmobxmobx-react

How to detect route change via browser back/forward button in MobX Router transition hook?


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()?


Solution

  • 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", {}, {fromButtonClick: true});
        }
    
        return <button onClick={cancelEditing}>{"Cancel"}</button>;
    }
    

    From Transition Hook:

    beforeExit: (fromState, toState) => {
        if (!toState.options.fromButtonClick) {
            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.