React-Router v4 - 기능으로 전환 방지

Question

v4 docs에 따라 탐색을 막을 수 있었지만 경고 대신 모달을 사용할 수 있도록 함수를 연결하려고합니다.

기능 :

<NavigationPrompt when={true} message={(location) => this.abandonForm('confirm')} /> 

this.props.showModal('confirm') 성공적으로 모달를 활성화하지만, 모달 뒤에 페이지가 여전히 전환 - 어떻게 모달의 버튼까지 전환을 방지 할 수 있습니다 : 내 페이지에서

abandonForm = (route) => { 
    this.props.showModal('confirm'); 
    console.log('leaving..'); 
} 

클릭 했습니까?

Answer 1

브라우저는 언급 한 경고 상자를 통해서만 탐색 취소를 허용합니다. 이러한 제한은 피싱/사기 사이트 (phishing/scamming sites)가 브라우저 또는 OS가 (사용자가 신뢰하는) 무언가를 설득력있게 모방하는 사용자 경험을 만들기 위해 javascript 특수 효과를 사용하려는 사이트에 의해 유발됩니다. 경고 상자에 표시된 텍스트의 형식조차도 제작되어 사이트에서 비롯된 것임이 분명합니다.

물론 현재 URL이 앱 내에있는 한 react-router의 기록을 사용하여 제어 할 수 있습니다. 예를 들어, 당신은 탐색에 다음을 수행 할 수

이

• 는
• 즉시 확인하지 않고 탐색을 허용 다시 이전 위치로 이동,하지만 지금은 최고
• 에 모달 진짜이 시간을 멀리 탐색 할 때 사용자가 모달에있는 버튼을 클릭합니다.

이 접근법의 단점은 다른 사이트로 완전히 이동하려고 시도하면 확인 대화 상자가 표시되지 않는다는 것입니다.