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方法的自定义钩子解决该问题。
原文地址：https://blog.csdn.net/zhengzhaoyang122/article/details/142691199
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！