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

j.log·2021년 7월 22일
7

React

목록 보기
10/10

부모-자식 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;




3. 마무리

이렇게 간단하게 routes 이동시, 이전 페이지에서 다음 페이지로 props를 넘겨줄 수 있다. 토이 프로젝트에서 유용하게 쓰일 듯 😊👍

profile
jlog

0개의 댓글