[React] react-router-dom v6 브라우저 뒤로가기 이벤트 감지 (history.action 대체)

useNavigationType

기존에 react-router-dom v5에서 history.action === 'POP' 과 같이 뒤로가기를 감지했던 것을 대체할 수 있다.

v6가 되면서 history는 여러개의 hook으로 분리되었다. 이제 popstate 이벤트가 발생했는지 pushstate 이벤트가 발생했는지는 useNavigationType()을 통해 알 수 있다.

 

활용 예 1

react-router를 이용해 검색을 처리했더니 뒤로 가기를 하면 이전 화면이 아니라 이전 쿼리 페이지로 가는 현상이 발생했다. 예를 들어 /search?q=apple 페이지에서 뒤로가기를 하면 이전 쿼리였던 /search?q=appl 페이지로 가는 식이다.

그래서 검색결과 페이지에서 뒤로가기 이벤트가 발생한다면 메인으로 이동시켜주는 코드를 만들어보았다.

import { useNavigate, useNavigationType } from 'react-router-dom';

const navigate = useNavigate();
const navigationType = useNavigationType();

useEffect(() => {
    if(navigationType === 'POP') {
      navigate('/');
    }
  }, [navigate, navigationType]);

활용 예 2

글을 작성하다가 뒤로가기 혹은 나가기 버튼을 누르면 '정말 나가시겠습니까? Y/N' 로 confirm 창이 뜨는 것을 본 적이 있을 것이다. 구현은 해보지 않았지만 navigationType이 POP인지 확인하고 만약 그렇다면 confirm창을 띄워, 결과가 true라면 뒤로 보내면 될 것 같다.