[React] export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' 해결

문제상황:

 

Nomad Coders의 트위터 클론코딩 강의의 #2.6 Log Out (06:37) 를 듣던  중 Profile.js에서 export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'에러 로그 발생

 

·  Profile.js

import React from "react";
import { authService } from "fbase";
import { useHistory } from "react-router-dom";

export default () => {
  const history = useHistory();
  const onLogOutClick = () => {
    authService.signOut();
    history.push("/");
  };
  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

 

에러로그

 

 

 

 

해결방법:

 

useHistory hook을 아래 코드와 같이 useNavigate hook으로 변경해준다.

 

 

·  Profile.js

import React from "react";
import { authService } from "fbase";
import { useNavigate } from "react-router-dom";

export default () => {
  const navigate = useNavigate();// use useNavigate() hook
  const onLogOutClick = () => {
    authService.signOut();
    navigate("/");// changed
  };
  return (
    <>
      <button onClick={onLogOutClick}>Log Out</button>
    </>
  );
};

원인분석:

 

React Router v6부터는 useHistory를 지원하지 않아서 발생한 문제이다. useHistory에 대응되는 새로운 hook인 useNavigate를 사용해야 한다.

 

이전에는 useHistory 객체의 메소드를 사용하는 방식이었지만  useNavigate는 함수로 사용된다.

 

아래는 useNavigate의 예시코드이다. Form 에서 submit이벤트가 발생하면 /dashboard로 보내준다.

import { useNavigate } from 'react-router-dom;

function Register () {
  const navigate = useNavigate()

  return (
    <div>
      <h1>Register</h1>
      <Form afterSubmit={() => navigate('/dashboard')} />
    </div>
  )
}

예시코드 출처:

https://ui.dev/react-router-programmatically-navigate/

 

 

 

참고))

 

아래 링크에 리액트 라우터 v6에서 생긴 변경점들을 잘 정리해 주고 있다. 같은 트위터 클론코딩강의를 듣는 사람들은 참고하면 좋을 것 같다.

 

https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC

React Router v6 업데이트 정리

 

 

 

 

 

 

 

 

참고링크:

https://ui.dev/react-router-programmatically-navigate/

How to Programmatically Navigate with React Router - ui.dev

 

https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC