useBeforeLeave
编辑此页面useBeforeLeave
接收一个函数,该函数将在离开路由之前被调用。
这个函数将接收以下参数:
- from (Location): 当前位置(变更前)。
- to (string | number): 传递给
navigate
的路径。 - options (NavigateOptions): 传递给
navigate
的选项。 - preventDefault (void function): 调用此函数来阻止路由变更。
- defaultPrevented (readonly boolean): 如果之前调用的任何离开处理器调用了
preventDefault()
,则为true
。 - retry (void function, force?: boolean): 调用此函数重试相同的导航。
传入
true
可以跳过再次运行离开处理器(即强制导航而不确认)。
使用示例:
useBeforeLeave((e: BeforeLeaveEventArgs) => { if (form.isDirty && !e.defaultPrevented) { // 调用 preventDefault 立即阻止并异步提示用户 e.preventDefault(); setTimeout(() => { if (window.confirm("放弃未保存的更改 - 您确定吗?")) { // 用户仍想继续,所以使用 force=true 重试 e.retry(true); } }, 100); }});