[React] history.block으로 뒤로가기 막기 (blocking-transition)

만약에 A 컴포넌트에 name 상태값이 있다고 가정하자

사용자가 A 컴포넌트의 name 상태값을 수정하였으나 실수로 브라우저 뒤로가기를 누르면 A 컴포넌트는 언마운트되고 수정했던 name 상태값은 유실된다.

 

이런 경우를 방지하기 위해 브라우저 뒤로가기 발생 시 '정말 뒤로 가겠습니까?'와 같이 사용자에게 한 번 더 확인을 요구하는 confirm 창을 띄울 수 있다.

 

 

history에서는 block으로 push/pop을 제어하여 이를 처리할 수 있도록 한다.

다음은 상태값이 변경되어 isBlocking이 true, action이 'POP'일 때 confirm창을 띄우는 예시이다.

코드 예시

참고

React Router v5.2 - Blocking route change with createBrowserHistory and history.block

(React) react-router history.block 적용해보기 - Prevents navigation