Histroy

• 라우트로 사용된 컴포넌트에 match, location 과 함께 전달되는 props 중 하나
• 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지 기록을 알 수 있기 때문인데,
  라우터는 path를 이용해 컴포넌트를 지정하면서 해당 컴포넌트에 props로 history를 넘겨줌

{length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
action: "PUSH"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 2
listen: ƒ listen(listener)
location: {pathname: "/about", search: "", hash: "", state: undefined, key: "mlmosl"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
__proto__: Object

이 history를 이용해서

<Button className={classes.loginFacebook} onClick={() => {
       history.push('/가고싶은 경로')}}></Button>

push 함수를 이용해 경로를 넘겨, 페이지 이동을 시킬 수 있음

goBack을 이용해서 이전으로 돌아갈 수 있음

import React, { useEffect } from 'react';

function HistorySample({ history }) { //컴포넌트 생성
  const goBack = () => {
    history.goBack();
  };

  const goHome = () => {
    history.push('/');
  };

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

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

• App.js

<Link to='/history'></Link>
<Route path="/history" component={historySample} />

WithRouter

Route 컴포넌트가 아닌 곳에서 match/ location / history를 사용할 때 사용

import { withRouter } from 'react-router-dom';
const WithRouterSample = ({ location, match, history }) => {
  return (
    <div>
      <h4>location</h4>
      <textarea value={JSON.stringify(location, null, 2)} readOnly />
      <h4>match</h4>
      <textarea value={JSON.stringify(match, null, 2)} readOnly />
      <button onClick={() => history.push('/')}>홈으로</button>
    </div>
  );
};