หลังจากลองไปนั่งหาข้อมูลได้ออกมาประมาณนี้ครับผม ✍️
โดยในตัวอย่างนี้ เราจะใช้ ⬇️
- library: react-use
- next router ที่มากับ Next.js
- react hook ที่ติดมากับ React เช่นกัน
อธิบายจากโค๊ดด้านบน มีการแบ่งการทำงานออกเป็น 2 events หลัก ๆ ดังนี้
เมื่อ ❌ ปิดแท็บ / 🔄 refresh หน้าเว็บ / 🚫 ปิด browser
เราจะใช้ custom hook ชื่อ useBeforeUnload จากไลบรารี่ react-use ในการจัดการกับ event เหล่านี้ โดย useBeforeUnloadมีการรับ params 2 ตัว คือ
- ตัวแรก คือ boolean เพื่อบอกให้เปิด alert
- ตัวอันที่สอง คือ ข้อความที่ต้องการแจ้งเตือน user
เมื่อ 🔙 กดปุ่ม back / ⬅️ swipe back (บน Mac)
ใน event เหล่านี้ เราจะ implement ผ่านการดัก event ของ next router ที่ชื่อ beforeHistoryChange เอามาผนวกเข้ากับ useEffect ของ react hook โดยการเขียน callback function ซึ่งใน function ให้ทำการเปิด confirm modal ขึ้นมาผ่าน window.confirm(ข้อความ) โดยมีการ return ค่ากลับมาเป็น boolean ในตัว modal จะมีปุ่ม ok/cancel ถ้า user กดปุ่ม ok ตัว window.confirm() จะ return ค่ากลับมาเป็น true และในบรรทัดที่ 13-15 เราจะทำการ emit event เพื่อขัดการทำงาน(cancel)ของ next router ทำให้ไม่เกิดการเปลี่ยนหน้าเว็บครับ
จบไปแล้วบล็อคสั้น ผมเอามาแชร์เผื่อเป็นประโยชน์กับเพื่อนๆ ครับ 😋
ref: https://github.com/vercel/next.js/issues/2476#issuecomment-957275207
