[리액트/웹] 뒤로가기 막기

배경

사용자가 관심매장을 신청하고, 완료가 되면 목록 페이지로 이동한다. 이후 뒤로가기를 하면 다시 신청 페이지가 나오는데 기획쪽에서 이걸 막고 싶다는 의견이 나왔다.
완성도가 떨어져 보여서 나도 막는 게 좋을 것 같다고 생각했다.

해결책

1. history stack을 직접 조작해보려고 했다.
   하지만 이건 보안 상의 이유로 안 된다고 한다!!
   하긴 누가 내 인터넷 접속 기록을 막 바꿀 수 있다면 문제가 크게 생길 거 같다...
   뒤로가기를 누르면 메인 페이지로 이동시키려 했는데 야심찬 계획이 틀어졌다.😥

2. 신청 페이지 -> 신청 완료 페이지 -> 목록 페이지 순서에서 컴포넌트를 하나 더 추가했다. 신청 페이지 -> replace 컴포넌트-> 신청 완료 페이지 -> 목록 페이지 이렇게!
   replace 컴포넌트의 목적은 한 번 완료 페이지를 거치고 나면 다시 신청 페이지로 돌아가지 못하게 하는 것이다.
   정확히 말하면, 강제로 완료 페이지로 돌려보낸다.

// replace 컴포넌트

import { useEffect } from "react";
import { useHistory, useLocation } from "react-router-dom";

const ReplaceComp = () => {
  const location = useLocation();
  const history = useHistory();
  const { isOkRoute } = location.state;

  useEffect(() => {
    if (isOkRoute) {
      history.push("/my-store/completion");
    } 
  }, []);
  return null;
};

export default ReplaceComp;

신청 페이지에서 url을 보내줄 때 이렇게 state를 함께 전달해준다.

    history.push({
          pathname: "/my-store/replace",
          state: { isOkRoute: true },
        });

사실, history.go(-1)을 할 때 isOkRoute: false로 바꿀 수 있다면 분기를 태워서 메인으로 보내는 것도 가능할 텐데 그 방법은 찾지 못했다. 찾으면 덧붙여 쓰겠음!😁