[React] 뒤로가기 방지

[React, Next.js] 뒤로가기(이전 페이지 가기) 방지

const preventGoBackHandler = () => {
  history.go(1);
};
  
useEffect(() => {
  window.addEventListener("popstate", preventGoBackHandler);
  return () => {
    window.removeEventListener("popstate", preventGoBackHandler);
  };
}, []);

history.go를 이용해 뒤로가기를 막는 효과이다.

* 사실 뒤로가기 자체를 막는 로직은 아니고 뒤로가고 앞으로 오는 로직이지만 UX적으로는 현재 페이지에 머물러 있는다.

 

hisyoty.go

2023.02.12 - [분류 전체보기] - [js] history.back(), history.forward(), history.go()

[js] history.back(), history.forward(), history.go()