[react] 리액트 하위 컴포넌트에서 history undefined 뜰 때 history 컴포넌트 내에서 직접 선언해 만들어 쓰기

상위 라우트에서 보내준 props를 받아서 하위 라우트 컴포넌트에서 쓰려고 하니까 history가 정의되지 않았다고 에러가 났다.

route에서 render를 통해 props값을 넘겨줘야했기 때문에 매개변수를 두개줘야하나 고민했는데

일단 급한대로 history를 컴포넌트 내에서 직접 선언하는 방법을 쓰기로했다.

 

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

function 함수({props}){
	let history = useHistory();
    
    //...생략
    
    history.push('/');	//이렇게 필요한 곳에 바로 history. 해서 쓰면 됨

}

1. react-router-dom 에서 history import해오기

2. let history = useHistory(); 이런식으로 history 선언해주기

3. 필요한 곳에 history.push(); 이렇게 사용하기

 

 

느낌 상 좋은 방법은 아닌 것 같다만... 일단 기능 구현이 먼저라서 이렇게 해보고 나중에 다른 방법을 찾든지 해야겠다.