특정 페이지에서 나올 때 자동으로 새로고침을 해야 하는 경우가 생겼다. 일단 URL이 달라질 때마다 이벤트가 호출되는 방법을 찾았다. URL 값을 가져오기 위해 리액트 라우터의 useLocation이라는 훅을 사용할 수 있는데 BrowserRouter가 있는 컴포넌트에서는 같이 쓸 수 없었다.
https://github.com/ReactTraining/react-router/issues/7015
그래서 BrowserRouter 컴포넌트의 자식 컴포넌트인 nav에 useLocation을 사용했다.
import { useLocation } from 'react-router-dom';
nav 이하의 페이지가 URL에 따라 달라질 때마다 nav 컴포넌트에서 useLocation과 useEffect를 사용하여 이벤트가 발생하도록 했다.
https://reacttraining.com/blog/react-router-v5-1/
let prePath = ''; // 컴포넌트 함수 외부에 위치
/* ... */
let location = useLocation();
useEffect(() => {
if (prePath.indexOf('/player/') !== -1) {
console.log('새로고침');
prePath = '';
window.location.reload(); // 새로고침
}
prePath = location.pathname; // 지금의 주소를 저장한다.
}, [location]);
useLocation으로 받는 URL 곧 location이 달라질 때마다 useEffect가 호출되고
이전의 주소인 prePath에 /player/라는 문자가 들어갔을 경우에 새로고침 된다.