History

History

라우트로 사용된 컴포넌트에게 match, location과 함께 전달되는 props 중 하나로, history를 통해 뒤로 가거나 앞으로 가거나 특정 url로 갈 수 있게 된다.

React Router

• match : router path와 url이 매칭된 정보가 담겨 있다.
• location : 현재 페이지에 대한 정보를 갖고 있으며, url의 쿼리 스트링을 가져올 수 있다.

---

import React, { useEffect } from "react";

function HistorySample({ history }) {
  //뒤로가기
  const goBack = () => {
    history.goBack();
  };

  //홈으로 가기
  const goHome = () => {
    history.push("/");
  };

  // 페이지 이탈시, 메세지 출력
  useEffect(() => {
    const unblock = history.block("정말 떠나실건가요?");
    return () => {
      unblock();
    };
  }, [history]);

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
    </div>
  );
}

export default HistorySample;

• push(path,[state]) : 새로운 경로를 history 스택으로 푸시하여 페이지 이동
• replace(path,[state]) : 최근 경로를 history 스택에서 교체하여 페이지 이동
• go(n) : history 스택의 포인터를 n번째로 이동
• goBack() : 이전 페이지로 이동
• goForward() : 앞 페이지로 이동
• block(prompt) : history 스택의 posh/pop 동작 제어

• react