history.push로 데이터 추가해서 보내주기

이진혁·2022년 4월 1일
0
post-thumbnail

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

// 'PhoneValidate' 컴포넌트 에서 'SetAccount' 컴포넌트로 이동
<button onClick={() => {this.props.history.push("/set_account")}} />

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

// 'PhoneValidate'의 'userCell' state를 'SetAccount'로 이동시 props로 넘겨주기
<button onClick={() => {this.props.history.push({
  pathname: "/set_account",
  state: {userCell: userCell}
})}} />
//function component 사용시:
import {useHistory} from "react-router";

const history = useHistory();

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

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

// 넘겨받은 'userCell' props를 'SetAccount'에서 사용하기
const userCell = this.props.location.state.userCell

//function component 사용시:
import {useLocation} from "react-router";

const location = useLocation();

const userCell = location.state.userCell;
profile
개발 === 99%의 노력과 1%의 기도

0개의 댓글