[React] withRouter & JS로 SPA 방식 라우팅

# withRouter

•  Higher-order Component 로 라우터에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근 가능하게 해준다.
• 하위 컴포넌트에서 상위 계층간의 거리가 멀어도 match, location, history를 안전하게 받을 수 있다.

       (props 로 열심히 전달하지 않아도 된다.)

---

# JS로 SPA 방식으로 라우팅하기 + withRouter 사용 예시

• <LoginButton {...props} /> 로 넘겨 줘도 되나, 계층간의 거리가 멀어지면 해당방식은 오류의 근원이 됨.

// src/pages/Login.jsx

import LoginButton from '../components/LoginButton';

export default function Login() {
  return (
    <div>
      <h2>This is Login Page.</h2>
      <LoginButton /> {/*LoginButton 컴포넌트에 props 를 주지않았음..!*/}
    </div>
  );
}
COPY
// src/components/LoginButton.jsx

import { withRouter } from "react-router";

export default withRouter(function LoginButton(props){
    function login(){
        setTimeout(()=>{
            props.history.push("/home"); //해당부분이 SPA 방식으로 라우팅하는 JS코드
        },1000);
    }
    return(
        <button onClick={login}>Start Login</button>
    );
});