[React] 특정한 action 이후 페이지 이동

대부분의 웹사이트에서 사용자는 비밀번호를 수정하거나, 로그인을 한 경우에 메인화면으로 자동으로 이동하게 되어집니다. 항상 좋은 UX를 위해, 특정한 action 이후에 필요한 페이지로 이동시켜줘야합니다. 

 

그렇다면, 이러한 페이지 이동을 React로 어떻게 구현 할까요?

 

바로, react-router를 이용하면 됩니다. 저도 공식문서를 참고해서 방법을 찾았습니다.

React Router: Declarative Routing for React

React 16.8이상 버전부터 사용가능한 useHistory hook을 이용해서 간편하게 페이지 이동을 할 수 있습니다.

 

 

[예시 코드]

import { useHistory } from "react-router-dom";

function HomeButton() {
  // hook설정
  let history = useHistory();

  // history push를 통해서 home으로 페이지 이동
  function handleClick() {
    history.push("/home");
  }

  return (
    // 버튼을 클릭하면 handleClick 함수가 실행됩니다.
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}