react-router 重新加回跳转拦截功能详解

前言

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

事件经过

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