React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈

리액트를 사용하여 페이지 이동 함수를 만들고 있다.

[ 결제하기 ] 버튼을 누르면 goPay() 함수가 실행되며 history.push() 를 통해 결제 페이지로 넘어가야 한다.

하지만 url만 변경되고 빈 화면이다. 또한 새로고침을 해야만 이동한 페이지가 보이는 이슈가 발견되었다.

얘를 아무리 눌러도 빈페이지만 뜬다.

 

일단 url은 잘보이는 걸 보니 history.push() 는 잘 먹혀들어간다.

그럼 문제는 새로고침이라는 결론에 도달했다. 자 그럼 해결해보자 ! 

선명하게 보이는 URL

 

 

---

React(50) history.push 로 url 만 변경되고 새로고침이 안되는 이슈

 

결제하기 버튼을 누르면 goPay 함수로 연결된다.

goPay() 에서는 history.push로 ' /payment ' 페이지로 이동한다.

<button onClick={goPay}>결제하기</button>

 

function goPay() {
  history.push(`/payment`);
}

 

왜 나에게 이런 일이? 

이유는 url 만 변경되고 컴포넌트가 재렌더링이 되지 않아 useEffect를 통해 바뀐 화면을 그리지 못하기 때문이다.

그렇기 때문에 렌더링을 한번 더 시켜주면 된다.

 

문제해결 

여러가지 방법이 있겠지만 나의 경우는 새로고침 기능을 추가해주었다.

location.reload(); 내장함수를 코드 바로 뒤에 붙였더니 url 이 이동하면서 뒤이어 새로고침을 실행시켜서 잘 보인다.

function goPay() {
  history.push(`/payment`);
  location.reload();	// 새로고침 내장함수 추가!
}