사용자가 떠나기 전에 표시하기 위해 React에서 사용자 지정 대화 상자를 만드는 방법

안녕하세요, 오늘 저는 React에서 약간의 트릭을 보여줄 것입니다. 어떤 값이 어떤 조치를 필요로 할 때(예: 저장 양식, 해당 변경 사항을 기반으로 몇 가지 작업을 수행하기 위해)

어떻게 오나요?

사용자가 양식에 변경 사항이 있고 해당 변경 사항을 저장하지 않고 사이트를 떠나려고 할 때 사용자 지정 대화 상자를 표시해야 하는 하나의 모듈이 할당되었습니다.

내 결과

솔직히 말해서 처음에는 간단한 대화 상자이고 프롬프트를 표시하거나 숨기는 상태를 유지해야 하기 때문에 쉽게 할 수 있다고 생각했습니다. 하지만 경로 변경도 추적해야 할 때 문제가 발생했습니다. Google을 검색한 후 this에 대해 알게 되었지만 사용자 지정 대화 상자를 표시해야 한다는 요구 사항이 있었기 때문입니다. onBeforeUnload는 대화 상자를 사용자 정의할 수 없기 때문에(텍스트 문자열만 변경할 수 있음). 정확한 솔루션이 아닌 것을 탐색한 후 일부 패키지가 이 작업을 수행하고 있음을 발견했습니다.
그러나 우리(내 팀)는 이를 위해 타사 라이브러리를 사용하고 싶지 않습니다. 그래서 나는 그것을 조사할 기회를 얻었다.

해결책

google 및 StackOverflow에 대해 자세히 살펴본 후 해당 요구 사항에 활용할 수 있는 react-router 제공 history 소품에 대해 알게 되었습니다. 그런 다음 문서를 살펴본 후 구현을 시도하기 시작했습니다. 그리고 생각보다 쉬웠다.
따라서 기본적으로 이를 수행하려면 다음 단계를 따라야 합니다.

대화 상자 구성 요소 생성

경로를 차단하려는 모든 곳에서. 구성 요소 마운트에서 history.block를 사용하십시오(이렇게 하면 탐색이 차단됨).

  componentDidMount(){
    const {history} = this.props;
    this.unblock = history.block(tx => {
      // Navigation was blocked! Let's show a confirmation dialog
      // so the user can decide if they actually want to navigate
      // away and discard changes they've made in the current page.
      this.url = tx.location.pathname;
    });
  }

history.block는 다음을 실행하여 탐색 차단을 해제할 수 있음을 의미하는 콜백을 제공하므로

    mySomeRandomFunction(){
      const {history} = this.props;
      this.unblock(); //If condition is satisfied
    }

기준이 충족되면 해당 경로의 차단을 해제합니다. 그게 다야 그것만 하면 돼

마지막이지만 가장 작은 것은 아닙니다(데모)

경고

history 문서에 따르면:
history.block는 all in-page navigation attempts에 대한 콜백을 호출하지만
페이지를 새로고침하는 탐색(예: 새로고침 버튼 또는history.push )를 사용하지 않음 beforeunload
handler을 등록합니다.
탐색을 방지합니다. 최신 브라우저에서는 이를 사용자 정의할 수 없습니다.
대화

위 사항을 염두에 두십시오. 즉 it wont work if page is reload it only work if you try to change some action in page