[nodejs오류] export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'

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

 

react-router-dom에서 useHistory를 import해오려고 하였는데 다음과 같은 오류가 떴다.

 

 

문제원인

react-router-dom 버전이 6버전대로 올라가면서 useHistory()가 useNavigate()으로 바뀌었다.

 

 

해결방법

다음의 코드를 대신 삽입한다.

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate(); 
navigate('/home')

추가적으로 useHistory를 useNavigate으로 바꿔준다.

 

 

 

 

추가오류 발생

이번에는 다음과 같은 오류가 발생했다.

 

 

문제원인2

useNavigate가 고차컴포넌트(Higher Order Component)가 아니기 때문에 발생한 오류이다. 

useNavigate를 함수 컴포넌트 안으로 옮겨주어야 한다.

 

 

해결방법2

  const navigate = useNavigate();
  navigate('/home');

위의 코드만 useNavigate를 사용하고 있는 함수 안에 넣어준다.

 

 

 

//수정 전
function App(props) {
  let history = useNavigate();
}

 

//수정 후
function App(props) {
  const navigate = useNavigate();
  navigate('/home');

  let history = useNavigate();