Cho em hỏi về cách chặn chuyển trang trong React
42 lượt xem
Ẩn danh
Ngày 10 Tháng 05
Hi ac, Em đang làm SPA trong đó có chế độ soạn thảo nội dung. Khi user đang viết mà thoát trang thì em định làm pop up hỏi xác nhận lại, đồng thời giữ nguyên ở page đó chưa di chuyển. Em đã làm cái này cho cả trường hợp ấn quay lại và refresh trang, nhưng khi gọi các menu (component) khác thì việc di chuyển ra khỏi trang không bị chặn. Mọi người có thể chỉ cho em nên làm thế nào không ạ?
Đánh giá câu hỏi ngay!
Hãy ấn ↑Up Vote với những câu hỏi cụ thể và chi tiết
Hãy ấn ↓Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.
3 câu trả lời
Mình đang hiểu là bạn có 2 trường hợp: - Refresh hoặc thoát trang, bằng trình duyệt: Ok - Bấm sang component khác: Không OK. Lý do có thể là bạn detect được change của url bằng API của trình duyệt cung cấp. Còn lúc bạn nhấn qua menu thì lại không như vậy, đây được xử lý bởi cơ chế routing của react. Bạn có thể sử dụng useCallbackPrompt Hook: https://dev.to/bangash1996/detecting-user-leaving-page-with-react-router-dom-v602-33ni
bạn có thể sử dụng preventDefault()
Thường nếu là page có input hay trình soạn thảo thì để control quay lại trang hay di chuyển sang chang khác bạn có thể dùng window.onbeforeunload. Trên React bạn dùng addEventListener khi vào trang là được.
Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!
Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.
Bạn đã có tài khoản rồi?
Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!
Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.