[React] history.push 로 페이지 이동시 페이지 업데이트가 되지 않는 오류

history.push 로 페이지 이동시 렌더링이 되지 않는 문제가 확인했다.

 

새로운 게임 방을 만들어 입장하고, 방을 바로 나왔을 때, 게임방에 아무도 없기에 방이 삭제된다.

 

 

exit 버튼으로 “/game” 경로로 이동할 때,

history.push("/game");

위의 코드를 사용하여 이동했다.

해당 페이지로 이동했을 때, 게임방이 남아있는 것을 확인할 수 있지만,

새로고침을 하고 나면 방이 없어지는 것을 알 수 있다.

따라서, 해당 페이지에서 새로고침이 되지 않는 문제가 있다는 것을 알 수 있었다.

 

 

1. window.location.reload() 사용하기

window.location.reload();

“hitory.push” 함수를 실행한 후, 위의 코드를 실행하여 새로고침을 하는 방법이 있다.

 

 

2. useEffect 의존성 배열에 match.params 추가하기

useEffect 의존성 배열에 해당 값을 넣으면 값이 변할때마다 리렌더링된다.

아래와 같이 코드를 작성할 수 있다.

function Game({match}){
	useEffect(()=>{}, [match.params]);
}

react-router-dom 버전6 이상에서는 props와 params가 사용되지 않으므로 useParams를 사용하여 값을 가져올 수 있다.

import {useEffect} from "react";
import {useParams} from "react-router-dom";

function Game(){
	const param = useParams();
	useEffect(()=>{}, [param]);
}

 

---

위의 두가지 방법 중 1번 방법으로 문제를 해결했다.

내 코드의 경우, params 값에 변화가 있는 것이 아니라 경로 전체에 변화가 생겨 2번으로 문제를 해결할 수 없었다.

 

 

참고자료

[React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기

[React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기

React - TypeError: Cannot read properties of undefined (reading 'params')

React - TypeError: Cannot read properties of undefined (reading 'params')