React Route v6. 如何防止用户导航到另一个页面

优质博文：IT-BLOG-CN

题目

我正在用React、TypeScript制作一个项目。当有未保存的更改时，我找不到如何阻止用户导航到另一个页面。为了更清楚起见 - 我知道如何做剩下的事情，我只需要一些可以阻止它处理直到用户确认的东西。任何关于React-Router V6解决方案的链接都将不胜感激。此外，我可以尝试任何其他方法而不是React-Router来解决这个问题。我制作了BeforeUnloadEvent，但它仅在用户重新加载页面或导航到另一个网站时才有效。如果用户在应用程序内更改页面，它就不起作用。

我使用：

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.26.2",
"react-scripts": "^5.0.1",
"typescript": "^5.6.2"

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

我尝试了不同的useEffects，例如：

useEffect(() => {if (isDirty) {          setIsOpen(true);setNextLocation(location.pathname);}
}, [location.pathname]);

但我不明白如何添加“停止或暂停导航”。因为它是v6，所以很多互联网上常用的解决方案都不适用于它，例如Prompt、usePropmpt、.listen、.block、BeforeUnload。此外，我尝试过

useBeforeUnload(useCallback(e => {if (isDirty) {e.preventDefault();return '';}}, [isDirty])
); 

但它也不会停止导航（它的作用与BeforeUnloadEvent相同）。

解决方案

尝试实现一个利用useEffect钩子和usePrompt方法的自定义钩子解决该问题。