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

user_5426910 0
Viewed 25

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

mobx-react mobx reactjs javascript
1 Answers

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.

user_54269100
Related