时隔一年,react-router 终于重新加回了这个功能-跳转拦截

lxf2023-03-14 13:29:02

前言

路由的跳转拦截,在一些表单页中尤为常见。场景:用户输入了一些信息后但未提交,为了防止用户误点击某个跳转链接导致所填的表单信息丢失,跳转之前会弹出一个提示,如 “信息未提交,请确认是否离开” 等字样。

事件经过

react-router v6 之前有提供一个 <Prompt /> 组件来拦截路由的跳转。而在 v6 中却不支持此功能了!社区一片哀嚎,经查在 v6 实验阶段是有此功能的,但在 v6.0.0 beta-7 中删除了此功能。在这个 issue 链接 中每个人都强烈要求需要此功能,但官方回复会在不久的将来添加,有需要的可以回退到 v5,基本所有人都表示