How to implement prompts before React component uninstallation, route jump, and page closing (refresh)

The content this article brings to you is about the implementation method of React component uninstallation, route jump and prompt before page closing (refresh). It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

The React component unloading life cycle, routing jump and page closing look somewhat similar. For example, the current component is about to disappear from the viewport, but in fact the events triggered are not the same. same. Let's start with a practical case:

The user on the article editing page of a single-page application is editing an article, which has not yet been saved.

When the user accidentally jumps to another route, the user needs to be reminded whether to continue jumping. This process needs to trigger the route jump and component uninstallation;

And the user accidentally clicks the close tab button , or refreshed the page. This process triggers the page unloading event;

In this case we need to implement:

1. A prompt box pops up when the user jumps to the page (routing adopts history mode)

2. A prompt box pops up when the user closes the page

componentWillUnmount

First of all, this hook function is a function called before the component is uninstalled. It does not prevent the current component from being uninstalled. . So don’t try to make a prompt here, because even if it is prompted, the component will still be uninstalled and the article will still disappear.

Route Guard-<Prompt/>

In order to implement the first function, a judgment is required before jumping to the route. The previous route guard was canceled after react-router-dom 4.0 (Actually, I have not studied the previous version, this description is taken from the Internet). After react-router-dom 4.0, you can rely on the <Prompt/> component to achieve this function. Document link↗

Add this component to any part of your article editing page component

import {Prompt} from 'react-router-dom';
const Editor=()=>{
    return (
        <div>
          <Prompt
            when={true}
            message={location => '文章要保存吼，确定离开吗？'}
          />
        </div>
    )
}

One thing to note here is that when using <Prompt/>, your route will jump It must be implemented through and cannot rely on the native tag.
When you click Cancel, you will stay on the current page. So far, the function of reminding the user to save when routing jumps has been implemented.

Window closing event-beforeunload

To achieve the second function, you need to rely on monitoring the window. The application of window events in React applications is far less frequent than that of DOM events, so I haven't encountered it in a long time and it is still a bit unfamiliar. The most important thing is, when should monitoring be performed?

Events should be listened to when the component is mounted, and event monitoring should be removed when the component is unmounted. Because I have begun to fully adopt the new features of hooks, useEffect is used here.

import React,{useEffect} from 'react';

const Editor=()=>{

 //监听窗口事件
    useEffect(() => {
        const listener = ev => {
            ev.preventDefault();
            ev.returnValue='文章要保存吼，确定离开吗？';
        };
        window.addEventListener('beforeunload', listener);
        return () => {
            window.removeEventListener('beforeunload', listener)
        }
    }, []);
    
//return ...
}

There are a few things to note here:

1. The second parameter of useEffect is an empty array, which means that only two hooks, componentDidMount and componentWillUnmount, are called

2 , The second parameter of event monitoring and removal is the same event processing function

3. The confirm, prompt, and alert in the beforeunload event will be ignored. Instead, there is a built-in browser dialog box. (Reference: MDN|beforeunload)

4. There must be a returnValue and it is a non-empty string, but in some browsers this value will not be used as a pop-up message

The above is the detailed content of How to implement prompts before React component uninstallation, route jump, and page closing (refresh). For more information, please follow other related articles on the PHP Chinese website!