브라우저 뒤로가기버튼을 눌렀을 때 beforunload 이벤트를 쓰고싶은데 react-router의 useNavigate를 쓰니 잘 안됐다.
근데 window.location.href를 쓰니 잘 됐다. 어떤 차이가 있을까?
react-router의 useNavigate로 리액트에서 쉽게 라우팅을 처리할 수 있다.
예를 들면
import { useNavigate } from 'react-router'
...
...
const navigate = useNavigate()
...
...
navigate('/sign-up')
...
이런식이다.
근데 저렇게 라우팅해서 이동한 페이지에서는 브라우저 뒤로가기 버튼을 클릭했을 때
beforeunload 이벤트가 먹히지 않았다.
하지만 window.location.href = 'localhost:5000/sign-up'
이렇게 이동하면 이동한 페이지에서 beforeunload 이벤트가 먹혔다.
궁금해서 useNavigate 코드를 봤다.
useNavigate는 history모듈에 의존성을 가지고 있고 이걸로 라우팅을 지원한다.
그래서 history도 까봤다.
history에는
...
globalhistory = window.history
...
...
function push(to: To, state?: any) {
let nextAction = Action.Push;
let nextLocation = getNextLocation(to, state);
function retry() {
push(to, state);
}
if (allowTx(nextAction, nextLocation, retry)) {
let [historyState, url] = getHistoryStateAndUrl(nextLocation, index + 1);
// TODO: Support forced reloading
// try...catch because iOS limits us to 100 pushState calls :/
try {
globalHistory.pushState(historyState, '', url);
} catch (error) {
// They are going to lose state here, but there is no real
// way to warn them about it since the page will refresh...
window.location.assign(url);
}
applyTx(nextAction);
}
}
...이런 코드가 있다.
결국 window.history를 이용해서 라우팅을 하는 것이다.
두 가지가 어떻게 다른지 찾아봤다.
history는 HTTP요청을 새로 하지 않고 안의 내용만 바꾼다.
그러므로 브라우저 뒤로가기버튼을 클릭해도 페이지가 unload되지 않고 내용만 바뀐다.
location.href로 페이지를 전환하면 HTTP요청을 새로 한다.
그래서 브라우저 뒤로가기를 클릭하면 페이지가 unload되고 새로운 페이지를 불러온다.
FE 초짜