Prevent Transition với React router dom

Hi mọi người. Tình hình là mình vừa mới làm xong task "hiển thị thông báo cho người dùng lúc chuyển trang" nên ở bài viết này mình sẽ chia sẻ hai cách mà mình tìm hiểu được nhé. OK go go

Cách 1: Sử dụng Prompt

<Prompt when={formIsHalfFilledOut} message="Are you sure you want to leave?"
/>

Nguồn: https://reactrouter.com/core/api/Prompt

Trong đó message có thể là string hoặc function

export interface PromptProps { message: string | ((location: H.Location, action: H.Action) => string | boolean); when?: boolean;
}

Ví dụ:

function BlockingForm() { let [isBlocking, setIsBlocking] = useState(false); return ( <form onSubmit={event => { event.preventDefault(); event.target.reset(); setIsBlocking(false); }} > <Prompt when={isBlocking} message={location => `Are you sure you want to go to ${location.pathname}` } /> <p> Blocking?{" "} {isBlocking ? "Yes, click a link or the back button" : "Nope"} </p> <p> <input size="50" placeholder="type something to block transitions" onChange={event => { setIsBlocking(event.target.value.length > 0); }} /> </p> <p> <button>Submit to stop blocking</button> </p> </form> );
}

Nguồn: https://reactrouter.com/web/example/preventing-transitions

Để customize Prompt, mọi người có thể tham khảo ví dụ này nhé: https://codesandbox.io/s/myw173jyq8

Cách 2: Sử dụng history.block

Cú pháp của nó kiểu như sau:

// Register a simple prompt message that will be shown the
// user before they navigate away from the current page.
const unblock = history.block('Are you sure you want to leave this page?'); // Or use a function that returns the message when it's needed.
history.block((location, action) => { // The location and action arguments indicate the location // we're transitioning to and how we're getting there. // A common use case is to prevent the user from leaving the // page if there's a form they haven't submitted yet. if (input.value !== '') return 'Are you sure you want to leave this page?';
}); // To stop blocking transitions, call the function returned from block().
unblock();

Nguồn: https://github.com/ReactTraining/history/blob/v4/docs/Blocking.md

Lưu ý: ở đây mình sử dụng history v4 mọi người nhé, v5 sẽ ko hoạt động đúng, đều cũng tương tự, mọi người tự tìm hiểu thêm nhé ^^

Mình sẽ sửa lại code ở cách trên như sau:

function BlockingForm() { const history = useHistory() let [isBlocking, setIsBlocking] = useState(false); useEffect(() => { let unblock; if (isBlocking) { unblock = history.block((location) => { if (window.confirm(`Are you sure you want to go to ${location.pathname}`)) { unblock(); return true; } return false; }); } else { if (unblock) unblock(); } return unblock; }, [isBlocking]) return ( <form onSubmit={event => { event.preventDefault(); event.target.reset(); setIsBlocking(false); }} > <p> Blocking?{" "} {isBlocking ? "Yes, click a link or the back button" : "Nope"} </p> <p> <input size="50" placeholder="type something to block transitions" onChange={event => { setIsBlocking(event.target.value.length > 0); }} /> </p> <p> <button>Submit to stop blocking</button> </p> </form> );
} 

Kết

Bài viết hôm nay đến đây thôi, hy vọng sẽ giúp ích được cho mọi người trong những dự án sắp tới. Chúc mọi người thành công