(업데이트) react router v6.4
history.listen
을 대체하는 router.subscribe
가 업데이트되었습니다. 이를 사용하셔서 구현하시면 됩니다.
https://stackoverflow.com/a/71399121/21138374
이전 답변: react router v6.0
React router v5에서는 useHistory 의 return value인 history의 history.listen() 으로 뒤로가기 이벤트를 탐지하는 예제가 많이 나온다. 그러나 최근에 React router가 v6 업데이트 되면서 useHistory가 없어지며 history.listen을 사용하시던 분들과 뒤로가기 이벤트 탐지를 검색하시던 분들이 어려움을 겪었을 것이다. 필자 또한 이 방법을 찾느라 + 그냥 코드를 잘못 적었는데 몰라서 뒤로가기 이벤트 탐지 기능을 구현하는 데 애를 먹었다.
history.ts
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
먼저 react-router에 history가 없어졌으니 history 라이브러리에서 가져오자. 패키지 매니저에 따라 yarn add history나 npm i history로 추가하면 된다.
추가했으면 createBrowerHistory()로 history 객체를 생성한다
page.tsx
import { history } from "some/directory/history"
useEffect(() => {
const listenBackEvent = () => {
// 뒤로가기 할 때 수행할 동작을 적는다
};
const unlistenHistoryEvent = history.listen(({ action }) => {
if (action === "POP") {
listenBackEvent();
}
});
return unlistenHistoryEvent;
}, [
// effect에서 사용하는 state를 추가
]);
그 다음은 아까 만들었던 history객체를 import만 하면 기존에 useHistory의 history를 사용하는 것과 똑같다. history의 update event를 listen하여 action이 "POP"일 때 (뒤로가기. 쌓아온 사용자 history stack을 pop 하는 거라서 뒤로가기다) 원하는 동작을 수행해야 한다.
이 때 listen으로 건 이벤트를 해제해야 하니 주의해야 한다. 그렇지 않으면 이벤트가 useEffect가 실행될 때마다 추가되기만 해서 같은 이벤트 여러개가 동작할 것이다. history.listen을 해제하는 방법은 history.listen이 return하는 함수를 호출하면 된다. 이 함수를 effect cleanup에 넣어서 다른 state를 가진 이벤트가 실행되기 전에 이전 이벤트가 해제되도록 하자.