React Router V6 中 Prompt 的替代方案答案

【问题标题】：Alternative for Prompt in React Router V6React Router V6 中 Prompt 的替代方案
【发布时间】：2021-12-01 04:03:54
【问题描述】：

React Router V6 中 Prompt 的替代品是什么，它是否已被弃用，并且像 usePrompt、useBlocker 这样的钩子也不可用。

<Prompt message="Are you sure you want to leave?" />

【问题讨论】：

React-router-dom v6 不再导出 Prompt 组件（或任何类型的导航阻塞）。我认为他们可能会在稍后介绍它，但与此同时，如果您想要/需要继续使用 Prompt 组件，您需要恢复到 v5。在 github 上看到这个discussion。

标签： reactjs react-router react-router-dom

【解决方案1】：

我有办法解决这个问题

这是一个钩子，提示用户他们即将丢失更改，并询问他们是否要继续。

钩子需要两个文件：useNavigatingAway.js和NavigationBlocker.js，它们基于useLocation、useNavigation和UNSAFE_NavigationContext；最后一个是由开发 React Router 的人提供的，它为我们提供了制作这些东西的替代方案。

原文是https://dev.to/bangash1996/detecting-user-leaving-page-with-react-router-dom-v602-33ni，不过我改了名字，让大家更容易理解。我还用 javascript 编写了我的版本。

对话框和菜单是使用 MUI 开发的，它基于 React Router Dom 6

拉斐尔

【讨论】：

我希望您投反对票，因为您的回答接近于link-only answer。一个链接——即使是一个花哨的链接——到另一个地方来查找代码会降低这个答案的价值，因为（a）我必须看其他地方，（b）那个链接可能会死，以及（c）这个答案中没有代码，我通过在这里搜索找到它的能力减弱了。最好将您的 javascript 作为 sn-p 嵌入。