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

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(); {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 값을 가져올수있다.

참고사이트:

from http://youngble.tistory.com/80 by ccl(A) rewrite - 2021-12-31 00:26:40