[React-router-dom, History] window.history를 이용해 빈 페이지 뒤로가기 막기

오류 내용

프로젝트에서 사용되는 appbar 제작 중 뒤로 가기 기능을 가진 컴포넌트를 제작할 일이 있었습니다. 

기존에는 아래 코드처럼 useNavigate에서 제공하는 뒤로 가기 옵션인 -1을 이용해서 제작하였는데, 더 이상 이동할 페이지가 없을 경우, 그니까 최초 페이지일 때 뒤로 가기 버튼을 누를 경우 페이지를 나가버리는 버그가 있었습니다. 

const ArrowLeft = ({ locate = -1 }: { locate?: string | number }) => {
  const navigate = useNavigate();
  const onClick = () => {
    navigate(locate as string);
  };

  return (
    <Button onClick={onClick}>
      <img src={CaretLeftIcon} alt="arrow-left" />
    </Button>
  );
};

export default ArrowLeft;

원인

브라우저에는 히스토리에 state를 저장해 놓는 history 스택이 있습니다.

useNavigate의 -1 옵션은 history 스택에서 POP을 해주어 이전에 기록된 페이지로 이동을 하는 방식인데,

최초 웹 사이트 실행 시 history 스택에 값이 쌓이고 다른 페이지 이동 없이 -1 옵션으로 페이지 이동을 하면 최초 웹 사이트 실행할 때 쌓인 history 스택이 POP이 되어 페이지를 나가버리는 게 되는 것이었습니다.

 

해결

스택의 길이가 1일 경우 오류가 발생하기에 스택의 길이가 2 이하일 경우 홈으로 이동해 주도록 하였습니다.

또한 뒤로 가기를 다시 눌렀을 경우 페이지를 나가는 것을 방지하기 위해 useNavigate에서 제공하는 history 스택에 값이 등록되는 걸 막아주는 옵션인 replace 옵션을 활성화해 주었습니다.

아래는 수정한 코드입니다.

const ArrowLeft = ({ locate = -1 }: { locate?: string | number }) => {
  const navigate = useNavigate();
  const onClick = () => {
    history.length <= 2 ? navigate('/', { replace: true }) : navigate(locate as string);
  };

  return (
    <Button onClick={onClick}>
      <img src={CaretLeftIcon} alt="arrow-left" />
    </Button>
  );
};

export default ArrowLeft;