withRouter 함수는 HoC(Higher-order Component)이다. 라우트로 사용된 컴포넌트가 아니더라도 match, location, history 객체를 접근할 수 있게 해 준다.

import React from "react";
import { withRouter } from "react-router-dom";

const WithRouterSample = ({ location, match, history }) => {
  return (
    <div>
      <h4>location</h4>
      <textarea
        value={JSON.stringify(location, null, 2)}
        rows={7}
        readOnly={true}
      />
      <h4>match</h4>
      <textarea
        value={JSON.stringify(match, null, 2)}
        rows={7}
        readOnly={true}
      />
      <button onClick={() => history.push("/")}>홈으로</button>
    </div>
  );
};

**export default withRouter(WithRouterSample);**

위 코드와 같이 withRouter를 사용할 때는 컴포넌트를 내보내 줄 때 함수로 한번 깜사준다. JSON stringify의 두 번째 파라미터와 세번째 파라미터에 null, 2로 설정해 주면 JSON에 들여쓰기가 적용된 상태로 문자열이 만들어 진다. 비교는 아래 코드를 참고.

JSON.stringify 일반 버전

{"path":"/profiles/:username","url":"/profiles/gildong","isExact":true,"params":{"username":"gildong"}}

JSON.stringify 두번째, 세번째 파라미터에 null, 2를 적용한 버전

{
  "path": "/profiles/:username",
  "url": "/profiles/gildong",
  "isExact": true,
  "params": {
    "username": "gildong"
  }
}