react函数式组件在退出当前页面时出现弹框点击确认按钮才跳转到新页面

在React中，当使用函数式组件并且希望在离开当前页面前显示一个确认弹框时，通常会结合`useEffect` hook 和 `onBeforeUnload` 或者 `window.addEventListener('beforeunload')` 来实现这个功能。当你需要用户确认是否离开，可以这样做：

1. 首先，在组件卸载之前添加一个事件监听器：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault(); // 阻止默认行为（浏览器直接刷新）
      const isConfirmed = confirm('确定要离开吗？'); // 显示确认对话框
      if (!isConfirmed) {
        return false; // 如果用户取消，返回false阻止跳转
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    
    // 清除事件监听器，防止内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  // ...其他组件内容...
}

2. 当用户关闭浏览器窗口或者按浏览器的返回键时，会触发`handleBeforeUnload` 函数，显示确认对话框。如果用户选择取消，页面就不会自动跳转。

注意，这种做法并不适合所有场景，因为它依赖于用户的交互，并且不是标准的路由导航。如果你正在构建一个完整的单页应用，可能需要考虑使用专门的路由库（如React Router）并配合生命周期钩子来处理导航流程。