React 구성 요소 제거, 경로 점프 및 페이지 닫기(새로 고침) 전에 프롬프트를 구현하는 방법

이 기사에서 제공하는 내용은 React 구성 요소 제거, 경로 점프 및 페이지 닫기(새로 고침) 전 프롬프트 구현 방법에 대한 내용이므로 필요한 친구가 참고할 수 있기를 바랍니다. 도와주세요.

React 구성 요소 언로드 수명 주기, 라우팅 점프 및 페이지 닫기는 다소 비슷해 보입니다. 예를 들어 현재 구성 요소가 뷰포트에서 사라지려고 하지만 실제로는 이벤트가 발생합니다. 모두 다릅니다. 실제 사례부터 시작해 보겠습니다.

단일 페이지 애플리케이션의 기사 편집 페이지에서 사용자가 아직 저장되지 않은 기사를 편집하고 있습니다.

사용자가 실수로 다른 경로로 점프한 경우, 계속 점프할지 여부를 사용자에게 알려야 합니다. 이 프로세스에서는 경로 점프 및 구성요소 제거가 실행되어야 하며

사용자가 실수로 닫기를 클릭합니다. 탭 버튼을 누르거나 페이지를 새로 고쳤습니다. 이 프로세스는 페이지 언로드 이벤트를 트리거합니다.

이 경우 다음을 구현해야 합니다.

1 사용자가 페이지로 이동할 때 프롬프트 상자가 나타납니다(라우팅은 기록을 채택합니다). 모드)#🎜 🎜#

2. 사용자가 페이지를 닫으면 프롬프트 상자가 나타납니다

comComponentWillUnmount

첫번째 모두, 이 후크 함수는 구성 요소가 제거되기 전에 호출됩니다. 현재 구성 요소가 제거되는 것을 방지하지 않는 기능입니다. 따라서 여기에서 프롬프트를 표시하려고 하지 마십시오. 프롬프트가 표시되더라도 구성 요소는 여전히 제거되고 기사는 여전히 사라지기 때문입니다.

Route Guard-<Prompt/>

첫 번째 기능을 구현하려면 루트를 점프하기 전에 판단이 필요합니다.

구성요소에 있습니다. 문서 링크↗react-router-dom 4.0 之后取消了先前的路由守卫（其实我没研究过之前版本的，这个描述摘自网络）。在react-router-dom 4.0之后，实现这个功能可以依靠<Prompt/>

이 구성요소를 기사 편집 페이지 구성요소의 어느 부분에나 추가하세요

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

여기서 한 가지 주의할 점은 <프롬프트/>를 사용할 때 경로 점프는 를 통해 구현되어야 하며

취소를 클릭하시면 현재 페이지에 머물게 됩니다. 지금까지는 라우팅 점프 시 사용자에게 저장을 상기시키는 기능이 구현되었습니다.

창 닫기 이벤트-beforeunload

두 번째 기능을 구현하려면 창 모니터링에 의존해야 합니다. React 애플리케이션에서 윈도우 이벤트를 적용하는 일은 DOM 이벤트에 비해 훨씬 덜 빈번하기 때문에 오랫동안 접하지도 않았고 아직은 조금 낯설기도 합니다. 가장 중요한 것은 모니터링을 언제 수행해야 하는가입니다.

컴포넌트가 마운트되면 이벤트를 수신해야 하며, 컴포넌트가 마운트 해제되면 이벤트 모니터링을 제거해야 합니다. Hooks의 새로운 기능을 완전히 채택하기 시작했기 때문에 여기서는 useEffect를 사용합니다.

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 ...
}

여기서 몇 가지 참고할 사항이 있습니다:

1 useEffect의 두 번째 매개변수는 빈 배열입니다. 즉, 두 개의 후크인 componentDidMount 및 componentWillUnmount만 호출됩니다. #🎜🎜 #

2. 이벤트 모니터링 및 제거의 두 번째 매개변수는 동일한 이벤트 처리 기능입니다.

3 beforeunload 이벤트의 확인, 프롬프트 및 경고는 무시됩니다. 대신 내장된 브라우저 대화 상자가 있습니다. (참조:

MDN|beforeunload

) 4. returnValue가 있어야 하며 비어 있지 않은 문자열이지만 일부 브라우저에서는 이 값이 다음과 같이 사용되지 않습니다. 폭탄.창 메시지

위 내용은 React 구성 요소 제거, 경로 점프 및 페이지 닫기(새로 고침) 전에 프롬프트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!