[React] history.push()로 props 데이터 넘겨주기

부모-자식 component 관계가 아닌, routing으로 특정 페이지에서 다른 페이지로 이동 할때도 props를 넘겨 줄 수 있는 아주 간단한 방법이 있다.
( Function Component 기준 )

1. 일반적인 history.push() 사용법

• 'Prev' 컴포넌트 에서 'Next' 컴포넌트로 이동

<button onClick={() => {history.push("/Next")}} />

2. history.push()로 props 활용하기

2-1. history.push()로 props를 넘겨주는 방법

• Prev 의 'displays' state를 Next 로 이동시 props로 넘겨주기

import { useHistory } from "react-router";

 const history = useHistory();

 <button onClick={() => {history.push({
   pathname: "/Next",
   state: {displays: displays}
 })}} />

 

2-2. 이동한 페이지에서 props를 불러오는 방법

• 넘겨받은 'displays' props를 Next 에서 사용하기

import { useLocation } from "react-router";

 const location = useLocation();

 const item = location.state.displays;