如何通过MobX路由器转换挂钩中的浏览器后退/前进按钮检测路由更改

Question

假设我们有以下两条路线：

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;
}
}
}
}

如果用户从"；编辑"；至"；视图"；点击"路由"；取消"；或"；保存"；按钮，我不想显示放弃确认对话框。但如果他们使用浏览器按钮，我会。

如何在路线转换挂钩内确定路线更改是否由浏览器按钮触发？或者，直接呼叫routerStore.goTo()？

Answer 1

我找到了一种方法，通过利用RouterState.options将自定义状态传递给转换挂钩，来识别是否通过按钮单击更改了路由。

来自组件：

const Component = () => {
const cancelEditing = () => {
routerStore.goTo("Edit Route", {}, {fromButtonClick: true});
}
return <button onClick={cancelEditing}>{"Cancel"}</button>;
}

从转换挂钩：

beforeExit: (fromState, toState) => {
if (!toState.options.fromButtonClick) {
if (confirm("Do you want to discard changes?") {
return toState;
}
else {
return fromState;
}
}
}

此状态未持久化，因此单击浏览器的后退/前进按钮总是会弹出对话框。

不幸的是，这个方法只能通过直接调用RouterStore.goTo()来实现，因为RouterLink上没有名为options的道具。