[react-router-dom] Uncaught TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_5__.withRouter) is not a function

 

문제

Uncaught TypeError: 
(0 , react_router_dom__WEBPACK_IMPORTED_MODULE_5__.withRouter) is not a function

 

위의 내용 처럼 에러가 났다. 

withRouter 를 사용해서 문제가 생긴 것 같다.

 

---

 

원인

react_router_dom 의 v6 에서 withRouter를 지원하지 않아서 생기는 문제였다.

라우트가 아닌 컴포넌트에서 라우터에서 사용하는 객체 - location, match, history 를 사용하려면, withRouter 라는 HoC 를 사용할 때 사용한다.

 

이제는 match를 객체로 받아오는 것이 아니라 useParams를 사용해야한다.

 

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

const TestForm = ({ match }) => {
	const { username } = match.params;
}

export default withRouter(TestForm);

 

---

 

해결

withRouter를 다 useParams로 바꿔서 해결했다.

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

const Profile = () => {
	const { username } = useParams();
}

export default TestForm

 

 

---

 

➕ 추가 내용

 

 

useLocation  사용법

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

const location = useLocation();

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

 

 

이 외에도 history를 사용했던 작업들을 위와 같은 방법으로 바꿔서 오류를 해결하였다.