리액트 - 같은 Link를 클릭해도 새로고침 되도록 하기 (리액트 라우터 useLocation)

리액트 전체 링크

 

아래와 같이 로그인(리액트 라우터의 현재 링크 = http://localhost:3xxx/login)이 있다고 가정하자.

  <Link to="/login">
    로그인
  </Link>

 

아이디를 입력한 상태에서 로그인 링크를 누르면 현재의 라우터이기 때문에 새로고침이 발생하지 않는다.

 

해결 방법은 react router의 useLocation과 useEffect를 이용하여 강제로 새로고침하도록 한다.

useLocation은 현재 페이지에 대한 정보를 알려준다.

import { Route, Link, Routes, useLocation } from "react-router-dom";

...

let currentPath = "";

function App() {
  let location = useLocation();

  useEffect(() => {
    if(currentPath === location.pathname) window.location.reload();
     
    currentPath = location.pathname;
  }, [location]);
  
  ...
}

export default App;

 

최초로 페이지로 들어갈 경우 currentPath는 "" 이고, location.pathname(/login)이 된다.

그리고 라우터로 로그인을 다시 클릭하면

currentPath와 location.pathname이 같아서 새로고침 reload가 발생하게 된다.