Archive

react-router-dom 새로고침해야 작동하는 경우

18 May 2021 | React

react-router-dom 새로고침해야 작동하는 경우

react-router-dom 사용 시 어떤 특정 작업 후에 다시 페이지를 이동시켜야하는 경우,

예를 들어 게시글을 삭제 후 다시 home으로 돌아가야하는 경우에 history로 이동하면

새로고침을 해야 게시글이 삭제되는 것을 볼 수 있었다.

/* 이전 코드 */

import React from 'react';
import { deletePost } from '../actions/index';

function postShow({ history }) {
  const onClickDelete = () => {
    deletePost(id);
    history.push('/');
  };
  return (
    <div>
      <button onClick={onClickDelete}>
          DELETE
      </button>
    </div>
  );
}

export default postShow;

여기서 history를 사용할 경우 페이지 reload 없이 단순히 url만 변경되기 때문에 이전의 화면이 그대로 남아있다.

history 대신 window.location.replace()를 사용해야한다.

/* 수정 후 코드 */

import React from 'react';
import { deletePost } from '../actions/index';

function postShow() {
  const onClickDelete = () => {
    deletePost(id);
    window.location.replace('/');
  };
  return (
    <div>
      <button onClick={onClickDelete}>
          DELETE
      </button>
    </div>
  );
}

export default postShow;

Related Posts