React Prompt組件 阻止用戶離開頁面

import { Prompt } from "react-router-dom";

const Login = () => {
  return (
    <>
      <Prompt
        message={(location, action) => {
          // 返回 true 表示不攔截, 你可也檢查當前頁面數據，提示用戶是否放棄填寫的數據
          return true; 

          // 返回 string 會提示用戶，讓用戶選擇是否離開
          return `Are you sure you want to go to ${location.pathname}?`;
        }}
      />

      <Link2 to={"/home"}>To Home</Link2> 
    </>
  );
};

用戶可以通過瀏覽器導航，Prompt 將無法攔截

See also:

• https://reactrouter.com/core/api/Prompt