Next.js 页面离开提示：阻止用户意外刷新或离开

{"title":"Next.js 页面离开提示：阻止用户意外刷新或离开","description":"本文介绍如何在 Next.js 中使用 beforeunload 事件，在用户点击浏览器前进后退按钮、离开或刷新页面时弹出提示框，确保用户操作意愿。","keywords":"Next.js, beforeunload, 页面提示, 离开提示, 刷新提示, 浏览器前进后退","content":"要实现在 Next.js 中当用户点击浏览器前进或后退按钮、离开或刷新页面时弹出提示并需要用户确认才能继续，可以使用 JavaScript 的 beforeunload 事件。\n\n首先，在你的 Next.js 页面组件中，可以在 useEffect 钩子中添加以下代码：\n\njavascript\nuseEffect(() => {\n const handleBeforeUnload = (event) => {\n event.preventDefault();\n event.returnValue = '';\n };\n\n window.addEventListener('beforeunload', handleBeforeUnload);\n\n return () => {\n window.removeEventListener('beforeunload', handleBeforeUnload);\n };\n}, []);\n\n\n上述代码创建了一个名为 handleBeforeUnload 的事件处理函数，并将其添加到 beforeunload 事件的监听器中。当用户点击浏览器的前进、后退按钮，或者尝试离开或刷新页面时，handleBeforeUnload 函数将被触发。\n\n在 handleBeforeUnload 函数中，我们使用 event.preventDefault() 阻止默认的提示框弹出，并通过设置 event.returnValue = '' 来触发浏览器的默认提示框。用户只有在确认提示框中的内容后才能继续操作。\n\n最后，为了避免内存泄漏，我们在组件被卸载时需要将事件监听器移除。\n\n这样，当用户点击浏览器的前进、后退按钮，或者尝试离开或刷新页面时，就会弹出一个提示框。用户需要确认提示框中的内容后才能继续操作。"}