TIL 24 history.push (react-router-dom)

보통 useHistory를 사용하여 onClick 같은 이벤트가 발생했을때 해당 페이지 경로로 이동시킬때 사용한다.

보통은 위에처럼 history.push()에서 ()안에 원하는 경로를 써서 이동하게한다. 그런데 오늘 배운건 push 를 함과 동시에 그 안에 원하는  key : value 값을 넘겨주어서 넘어간곳에서 props로 쓸수있게 하는것이다. 이때 props 라고 쓰진 않고 해당 함수 컴포넌트 파라미터에 {location}라고 써서 가져온다.

보는거와 같이 pathname, category, zzz 라고 지정해준 key와 value 이 잘 넘어가지는 걸 console.log 와 redux-logger 를 통해 볼수있다.  만약 구글링으로 history.push 파라미터 라고 검색해보면

이런식으로 뜨게 되는데, {location}으로 넘겨주지 않아도 useLocation 이라는걸 사용하여 가져올수있다고한다.

 

예를들어서 아래와같이 props로 넘겨주고싶은걸 적으면

import { useHistory } from "react-router";

 const history = useHistory();

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

이와같이 path, state 를 넘겨주고,

 

import { useLocation } from "react-router";

 const location = useLocation();

 const item = location.state.displays;

해당 pathname에 해당하는 곳에 useLocation을 import하고 변수에 남아서 해당 location안에 있는 state에 접근하고 displays에 접근하여 value 값을 가져올수있다. 

 

참고사이트:

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

 

history.push()로 페이지 이동시 props 넘겨주기