React中如何检测页面刷新（F5或刷新图标操作）

Hey there! Let's fix that page refresh detection issue you're having with React. I see you tried using the beforeunload event but it didn't work as expected—let's break down why and how to get it working properly.

Why Your Current Code Isn't Working #

There are two key reasons your setup isn't triggering:

1. Browser Restrictions on Custom Popups: Browsers block alert() calls inside the beforeunload event for security and user experience reasons. This event is designed to let the browser show its own confirmation prompt, not custom alerts.
2. Missing Required Event Handling: Your onUnload function doesn't signal to the browser that it should trigger the confirmation flow. You need to either call event.preventDefault() or set event.returnValue to a non-empty string to activate the prompt.

Corrected Class Component Code #

Here's how to adjust your class component to properly capture the refresh/close event:

class YourComponent extends React.Component {
  // Use an arrow function to preserve `this` context
  handleBeforeUnload = (event) => {
    // Tell the browser to show the confirmation prompt
    event.preventDefault();
    // Set returnValue (browsers may ignore custom text, but this is required)
    event.returnValue = '';
    
    // Perform your custom logic here (e.g., log the event, send analytics)
    console.log('Page is about to refresh or close');
    
    // If you need to send data before unload, use sendBeacon (avoids request cancellation)
    navigator.sendBeacon('/api/log-user-action', JSON.stringify({ action: 'page_refresh' }));
  };

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  render() {
    return <div>Your component content goes here</div>;
  }
}

For Function Components (React Hooks) #

If you're using functional components with hooks, here's the equivalent setup:

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = '';
      console.log('Page is about to refresh or close');
      
      // Optional: Send data safely with sendBeacon
      navigator.sendBeacon('/api/log', JSON.stringify({ type: 'page_refresh' }));
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []); // Empty dependency array ensures this runs once on mount

  return <div>Your component content goes here</div>;
}

Key Notes to Remember #

• Browser Prompt Customization: Most modern browsers ignore the custom text you set in event.returnValue and display a default message (e.g., "Are you sure you want to leave?"). This is a security restriction you can't bypass.
• Safe Data Sending: Use navigator.sendBeacon() instead of regular fetch/axios for any data you need to send before unload. It's designed to handle asynchronous requests during page unload without being canceled by the browser.
• Memory Leaks: Always remove the event listener when the component unmounts to avoid memory leaks in your app.

内容的提问来源于stack exchange，提问作者Maria Jeysingh Anbu