[에러 해결] 프로젝트 삭제 후 뒤로 가기로 인한 에러 해결

아래 사진에서 볼 수 있다시피, 관리 탭에서는 프로젝트 삭제를 할 수 있다.

 

위 사진에서 프로젝트 삭제를 하게 되면, 맨 처음 프로젝트 관리 페이지로 리다이렉트시켰다.

하지만, 만약 뒤로 가기를 누른다면?

당연히 에러가 난다.

왜냐하면, 삭제한 프로젝트 페이지에 다시 접속 시도를 한 것이기 때문이다.

 

그래서 나는 프로젝트 삭제 후에는 뒤로 가기를 막으려고 한참을 코드를 작성했다.

내가 알고 있는 바로는 useNavigate 훅을 사용할 때 { replace: true } 값을 넣어주면 뒤록 가기를 막을 수 있다는 것이었다.

 

하지만, 왜인지 모르게 그 방법으로는 되지 않았다.

그래서 열심히 구글링을 해보았다.

알고 보니 react-router-dom v6에는 replace: true가 동작하지 않는다고 한다.

 

그렇게 다른 방법으로 뒤로 가기를 막으려고 시도했다.

그러다가 내가 출처로 단 블로그 글을 보게 되었고, 해당 글처럼 하니 뒤로 가기를 막을 수 있었다.

내가 지금 사용하는 라우터 버전이 v6이기 때문에 v6에 맞는 뒤로 가기 막기 방법을 찾았다.

 

아래와 같이 history를 생성해 주고, 뒤로 가기 막기가 필요한 컴포넌트에 useEffect 훅으로 아래 내용을 작성해주었다.

import { createBrowserHistory } from "history";

export const history = createBrowserHistory();

useEffect(() => {
    const listenBackEvent = () => {
      navigate("/management");
    };

    const historyEvent = history.listen(({ action }) => {
      if (action === "POP") {
        listenBackEvent();
      }
    });

    return historyEvent;
  }, [navigate]);

조금 더 자세히 설명해보자면, history 객체가 뒤로 가기 동작을 인식하면 다시 /management url을 가진 페이지, 즉, 관리 페이지로 이동시킨다는 코드이다.

지금 페이지가 관리 페이지인데, 사용자가 뒤로 가기를 했을 때 다시 관리 페이지로 이동시킨다.

그렇게 하면 뒤로 가기를 막을 수 있게 된다.

 

아 그리고 주의할 점은 history는 사용하는 컴포넌트에 같이 작성하면 안 되고 분리해서 사용해야 한다고 한다.

조심하자.

 

참고 자료

https://velog.io/@dyorong/shallow-dive-into-react-router-dom-v6-createBrowserHistory