[Error, React-Hook] props.history가 없어요! (useHistory)

리액트 개발을 하던 중, props.history가 자식 컴포넌트에서 동작하지 않는 상황에 마주했습니다.

 

App.js에서 { withRouter } from "react-router"로 묶어주고, App을 withRouter로 감싸줍니다.

그리고,

index.js에서 { BrowserRouter } from "react-router-dom"으로 묶어주면, props에 history 객체가 생성되는데요.

 

이를 이용해서, 뒤로가기, Link걸기 등의 작업을 할 수 있습니다.

 

그런데, App.js -> Home -> Header -> Menu  이런식으로 자식의 자식의 자식 컴포넌트로 이어지면,

props.hisotry객체가 전달되지 않았습니다.

 

 

 

이런 경우 해결할 수 있는 방법으로 useHistory를 이용하면 됩니다.

 

import { useHistory } from "react-router-dom";

const histroy = useHistory();

useEffect(()=> {
	console.log(history);
}, [])

위처럼, 훅을 이용하면 쉽게 props에 history 객체를 이용해 여러가지 작업을 수행할 수 있습니다.

 

위처럼 입력해서 검사창을 열어 콘솔을 확인했을 때, 다음과 같이 출력되면 성공입니다 !