기술개발/React, Frontend

리액트 - history.push() 이후 refresh 안되는 문제

한승욱 2021. 3. 17. 00:59
반응형

https://binaryjourney.tistory.com/15?category=916264

문제

 

현재 윗글 블로거 님의 글을 보면서 내가 개발하려는 서비스에 맞춰서 진행을 하고 있었다.

(현재 개발하고 있는 서비스는 게시판 서비스와 동일하다고 봐도 무방하다.)

 

history.push()를 통해 특정 액션 이후에 해당 페이지로 이동을 하려고 하는 것이 핵심 로직 중 하나인데,

아래와 같다.

  1. 유저가 아래와 같은 폼에서 방을 생성한다.

(디자인이 허접해도 이해 부탁드립니다...)

 

2. 등록하기 버튼을 누름으로써 방이 생성되면 해당 방으로 이동한다.

import { call, put, getContext } from 'redux-saga/effects';
import Axios from 'axios';
import { roomActions } from '../slice/roomSlice';
import history from '../utils/history';

export function* registerRoomAsync(action) {
    const data = action.payload;

    // const postedData = yield Axios.post(`http://localhost:4000/room`, data);
    const response = yield Axios.post(`http://localhost:4000/room`, data);

    yield alert('저장되었습니다.');

    console.log(response.data.id);

    // yield history.push(`/room/${response.data.id}`);

    history.push(`/room/${response.data.id}`, response.data.id);

    // history.push(url, object) 일 경우 object는 state로 보내짐
}
  • 이와 같이 특정 saga에서 감시를 하다가 history.push()를 통해 해당 방으로 이동하려고 하고 있다.

 

하지만 url이 바뀌기는 해도 계속해서 refresh가 되지 않고 아래와 같이 흰 화면만 노출되는 현상이 지속되고 있다.

 

새로고침하면 잘 나옴...

즉 history.push() 이후 refresh가 안되는 상태인데,

import { createBrowserHistory } from 'history';

export default createBrowserHistory({ forceRefresh: true });
  • 이와 같이 foreceRefresh를 넣어줘도... 해결이 계속해서 안되었다....

 

시도

React history.push() is updating url but not navigating to it in browser
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.
https://stackoverflow.com/questions/42941708/react-history-push-is-updating-url-but-not-navigating-to-it-in-browser

위 블로거님이 해결하신 방법을 참고해서 index.js에서 import { Router } from 'react-router'; 로 바꿔주고 웬만한 방법대로 다 진행해도 계속 동일한 문제가 반복되었다...

 

해결

그렇게 몇시간째 삽질하던 중 해당 아래 글을 발견하였고.......

history.push is changing url but not rendering component in react
I am facing a problem with react history.push . The logic of my code is, when the API call completes, if the login status in response is false, I want to push to another route. The URL is changing ...
https://stackoverflow.com/questions/64534429/history-push-is-changing-url-but-not-rendering-component-in-react

 

❯ yarn list history

├─ history@5.0.0
├─ react-router-dom@5.2.0
│  └─ history@4.10.1
└─ react-router@5.2.0
   └─ history@4.10.1

그대로 진행해보니 위와 같이 노출되었다.

현재 내 react-router-dom, react-router 패키지는 history@4.10.1 버전을 사용해야하는데

yarn add history

로 바로 진행하니 @5.0.0 버전이 설치되어 문제가 생긴 것이다.

 

그래서 바로

❯ yarn remove history
❯ yarn add history@4.10.1

으로 진행을 하였다.

 

결과

결과는........

성공!!!! 새로고침 버튼 없이도 바로 이동이 되었다 ㅎㅎㅎㅎㅎㅎㅎ

 

깨달은 점

  • 각 종속성에 알맞은 패키지를 설치해야 한다.
  • 갓택오버플로우...

binaryjourney.tistory.com/15?category=916264

반응형