Next.js 页面离开提示：前进、后退、刷新、关闭弹窗确认

要实现在用户点击浏览器前进或后退按钮、离开或刷新页面时弹出提示，需要使用beforeunload事件和window.confirm()方法。\n\n在Next.js中，可以在页面组件的useEffect钩子函数中添加beforeunload事件监听器，如下所示：\n\njavascript\nimport { useEffect } from 'react';\n\nconst MyComponent = () => {\n useEffect(() => {\n const confirmExit = (e) => {\n // 取消事件的默认行为\n e.preventDefault();\n // Chrome需要在返回前修改returnValue属性\n e.returnValue = '';\n\n // 弹出提示框\n const message = '确定要离开吗？';\n if (window.confirm(message)) {\n // 用户点击确定，继续执行离开操作\n window.removeEventListener('beforeunload', confirmExit);\n }\n };\n\n // 添加beforeunload事件监听器\n window.addEventListener('beforeunload', confirmExit);\n\n // 组件销毁时移除事件监听器\n return () => {\n window.removeEventListener('beforeunload', confirmExit);\n };\n }, []);\n\n return <div>My Component</div>;\n};\n\nexport default MyComponent;\n\n\n在上面的示例中，我们在useEffect钩子函数中添加了beforeunload事件的监听器。当用户点击浏览器的前进或后退按钮、离开或刷新页面时，会触发beforeunload事件。在事件处理函数中，我们取消了事件的默认行为，并修改了returnValue属性（在Chrome浏览器中需要修改）。然后，我们弹出一个提示框，询问用户是否确定离开页面。如果用户点击确定，我们移除beforeunload事件的监听器，允许页面继续执行离开操作。\n\n请注意，由于Next.js使用了客户端路由，页面之间的切换并不会触发beforeunload事件。如果需要在页面之间切换时也弹出提示框，可以考虑使用其他方法，如Router的beforePopState事件。