리액트에서 특정 라우트에 들어가거나 나올 때 새로고침하는 방법

공부는 혼자하는 거·2021년 8월 21일
1

React Tip

목록 보기
9/24

특정 페이지에서 나올 때 자동으로 새로고침을 해야 하는 경우가 생겼다. 일단 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/라는 문자가 들어갔을 경우에 새로고침 된다.

https://thinkforthink.tistory.com/220?category=841733

profile
시간대비효율

0개의 댓글