[React-Router-Dom]페이지 이동시 props 넘겨주기 history.push()

어느 페이지에서 현재페이지로 왔느냐에따라 다르게 처리하고 싶은 경우가 있다.

이때 react-router-dom의 history.push()로 간단하게 처리할 수 있다.

일반적으로 react-router-dom으로 라우팅할 경우 아래와 같이 많이 작성한다.

history.push('/paymentPage')

하지만 간단하게 아래와 같이 작성하면 어느페이지에서 현재페이지로 왔는지 props를 넘겨주어 현재 페이지에서확인할 수 있다.

history.push({pathname:"/paymentPage",state: {_id: "0001", name: "detailPage"}})

 경로를 받아올 때는 history.location을 사용해서 pathname 값과 state값을 현재 페이지에서 받을 수 있다.

위 코드에대한 결과는 아니고 프로젝트에서 사용했을때 console.log()로 history.location을 확인해보면 아래와 같이 해당 페이지에서 경로와 값들을 받을 수 있는것을 확인할 수 있다.

나의 경우 프로젝트에서 결제페이지로 넘어오는 경로가 장바구니 목록에서 온것인지 아니면 상품을 바로 선택해서 결제페이지로 넘어온것인지에 따라 다르게 처리하는데 사용했다.

참고:

https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4