[React] react-route-dom history

history 객체

history 객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나입니다. 이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있습니다 - 뒤로가기, 특정 경로로 이동, 이탈 방지 등..

src/HistorySample.js

import React, { useEffect } from "react";

function HistorySample({ history }) {
  const goBack = () => {
    history.goBack();
  };
  const goHome = () => {
    history.push("/");
  };
  const replaceToHome = () => {
    history.replace("/");
  };
  useEffect(() => {
    console.log(history);
    const unblock = history.block("정말 떠나실건가요 ㅠㅠ?");
    return () => {
      unblock();
    };
  }, [history]);

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

export default HistorySample;

라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 push()인데, history.push('이동하고자 하는 path') 를 통해 원하는 컴포넌트로 이동이 가능합니다.

 

src/App.js

import React from "react";
import { Route, Link } from "react-router-dom";
import About from "./About";
import HistorySample from "./HistorySample";
import Home from "./Home";
import Profiles from "./Profiles";

function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필목록</Link>
        </li>
        <li>
          <Link to="/history">예제</Link>
        </li>
      </ul>
      <hr />
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route path="/profiles" component={Profiles} />
      <Route path="/history" component={HistorySample} />
    </div>
  );
}

export default App;

 

history 객체를 콘솔로 찍어보면 아래와 같이 goBack(), goForward() 등 앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련 객체들이 존재한다.

• action : 라우터에서 가장 마지막으로 실행된 액션을 알려줍니다.
  - 탭이나 버튼을 클릭하여 이동하는 것은 push
  - 뒤로가기, 앞으로가기는 pop
• block : 사용자가 페이지에서 이탈하는 것을 방지하기 위한 것입니다.
• createHref : location 형태의 객체를 가지고 주소를 만드는 역할입니다.
• go : 앞으로 혹은 뒤로 가는 것인데 go(n)에 -1이면 뒤로가기 1이면 앞으로가기 -2 뒤로 두번가기입니다.
• goBack : 뒤로가기
• goForward : 앞으로가기
• length : 방문기록의 길이가 어느정도 되는지 확인할 수 있습니다.
• listen : 경로에 변동이 생겼을 때 특정 함수를 실행하고 싶을 때 사용합니다.
• location : 현재 자신이 있는 경로에 대한 정보가 있습니다
• push : 특정 주소로 이동합니다
• replace : 특정 주소로 이동하지만 방문 기록을 남기지 않습니다. 

 

 

위 사진을 보시면 위에는 리스트가 있고, 아래에 뒤로가기, 홈으로, 홈으로(Replace)가 있습니다.

소개를 클릭하여 들어갔다가 예제를 클릭하여 들어옵니다. 그 이후 홈으로 버튼을 눌립니다.
그리고나서, 브라우저에서 뒤로가기 버튼을 클릭하면 예제 페이지로 돌아옵니다.
허나 다시 소개 페이지 -> 예제 -> 홈으로(Replace)를 눌렸다가 브라우저 뒤로가기 버튼을 눌리면 예제페이지가 아닌 소개 페이지로 이동합니다.

 

useEffect(() => {
  console.log(history);
  const unblock = history.block("정말 떠나실건가요 ㅠㅠ?");
  return () => {
    unblock();
  };
}, [history]);

useEffect를 사용하여 block을 이용하여 unblock을 만들고 클린업 함수에 unblock을 실행시켜주면

페이지를 나가려고 할 때 alert 창이 뜹니다. 확인을 눌리면 페이지를 나가게되고, 취소를 눌리면 나가지 않게되는데 보통 블로그에서 글쓰다가 실수로 페이지 이동이 되거나 나가는것이 맞는지 확인할 때 주로 사용합니다.