동적 라우팅 실습 - 1

카드를 눌렀을때 /monsters/detail/로 이동하도록 구현해보자.

Card.js

카드 각각에 onClick 이벤트를 준다.
this.props.history.push
부모-자식 component 관계가 아닌, 
routing으로 특정 페이지에서 다른 페이지로 이동 할때도 props를 넘겨줄 수 있는 방법이다.


<div
        className="card-container"
        onClick={() => this.props.history.push("/monsters/detail")}
      >

그리고 카드를 클릭하면,

history가 없다는 에러가 뜬다.
history 객체를 route로 제공을 받는데,
component={컴포넌트명} 이렇게 연결이 되어있어야만 제공이 된다.

card컴포넌트는 연결이 되어있지 않아 history라는 객체를 props로
전달받지 못하는 것이다.
이런 경우,

withRouter를 이용하면 된다.