如何实现在用户离开整个React应用时显示自定义确认对话框？

Great question! This is such a tricky problem because modern browsers intentionally lock down customizations for the beforeunload event to stop abusive popups, but there are a few workarounds you can use to cover most common scenarios.

1. Preemptive Custom Dialog + beforeunload Fallback #

The core idea here is to detect when a user might be about to leave your app (like moving their mouse to the browser's close button or address bar) and show your custom dialog before the browser's default beforeunload prompt kicks in. Here's how to implement this in React:

Custom Hook Implementation #

import { useState, useEffect } from 'react';

const useCustomUnloadPrompt = (customMessage = "Are you sure you want to leave?") => {
  const [showCustomDialog, setShowCustomDialog] = useState(false);
  const [allowUnload, setAllowUnload] = useState(false);

  // Trigger custom dialog when mouse leaves the viewport (likely heading for close/address bar)
  useEffect(() => {
    const handleMouseLeave = (e) => {
      // Only trigger if dialog isn't already showing and we haven't allowed unload
      if (e.clientY < 0 && !showCustomDialog && !allowUnload) {
        setShowCustomDialog(true);
      }
    };

    window.addEventListener('mouseleave', handleMouseLeave);
    return () => window.removeEventListener('mouseleave', handleMouseLeave);
  }, [showCustomDialog, allowUnload]);

  // Handle actual page unload with browser's default prompt as fallback
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      if (!allowUnload) {
        e.preventDefault();
        // Modern browsers ignore the return value, but it's required to trigger the default prompt
        e.returnValue = customMessage;
        return customMessage;
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [allowUnload, customMessage]);

  // Confirm leave: allow unload and close dialog
  const handleConfirmLeave = () => {
    setAllowUnload(true);
    setShowCustomDialog(false);
    // If needed, you can manually trigger navigation here (e.g., for external links)
  };

  // Cancel leave: keep user in app
  const handleCancelLeave = () => {
    setShowCustomDialog(false);
    setAllowUnload(false);
  };

  return { showCustomDialog, handleConfirmLeave, handleCancelLeave };
};

// Usage in your App component
const App = () => {
  const { showCustomDialog, handleConfirmLeave, handleCancelLeave } = useCustomUnloadPrompt();

  return (
    <div className="app-container">
      {/* Your app content goes here */}
      <h1>My React App</h1>
      
      {/* Custom unload dialog */}
      {showCustomDialog && (
        <div className="custom-dialog-overlay">
          <div className="custom-dialog">
            <h3>Hold on!</h3>
            <p>You might lose unsaved changes if you leave now.</p>
            <div className="dialog-buttons">
              <button onClick={handleConfirmLeave} className="leave-btn">Yes, leave</button>
              <button onClick={handleCancelLeave} className="stay-btn">Stay in app</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Limitations of This Approach #

• It won't cover keyboard-triggered exits (like Ctrl+W or Alt+F4) since those don't trigger the mouseleave event.
• Some browsers or user settings might block the mouseleave listener, or users might close the tab without moving their mouse outside the viewport.
• The browser's default beforeunload prompt will still appear if the user proceeds to leave after your custom dialog (this is unavoidable due to browser restrictions).

2. Intercept External Link Clicks #

For cases where users click an external link within your app, you can intercept those clicks and show your custom dialog before allowing navigation:

import { useState, useEffect } from 'react';

const App = () => {
  const [showCustomDialog, setShowCustomDialog] = useState(false);
  const [targetExternalUrl, setTargetExternalUrl] = useState(null);

  useEffect(() => {
    const handleLinkClick = (e) => {
      const link = e.target.closest('a');
      if (link && !link.href.startsWith(window.location.origin)) {
        e.preventDefault();
        setTargetExternalUrl(link.href);
        setShowCustomDialog(true);
      }
    };

    document.addEventListener('click', handleLinkClick);
    return () => document.removeEventListener('click', handleLinkClick);
  }, []);

  const handleConfirmLeave = () => {
    window.location.href = targetExternalUrl;
    setShowCustomDialog(false);
  };

  const handleCancelLeave = () => {
    setShowCustomDialog(false);
    setTargetExternalUrl(null);
  };

  return (
    <div>
      {/* Your app content */}
      <a href="https://www.google.com">Go to Google</a>
      
      {showCustomDialog && (
        <div className="custom-dialog-overlay">
          <div className="custom-dialog">
            <h3>Are you sure you want to leave?</h3>
            <button onClick={handleConfirmLeave}>Yes</button>
            <button onClick={handleCancelLeave}>No</button>
          </div>
        </div>
      )}
    </div>
  );
};

Key Takeaways #

There's no perfect solution here—browser security restrictions prevent us from fully replacing the default beforeunload prompt. However, combining the preemptive mouseleave dialog and external link interception will cover most user-initiated exit scenarios, giving you more control over the user experience than relying solely on beforeunload.

内容的提问来源于stack exchange，提问作者OMGitzMidgar