react-router Link와 관련된 TypeScript 오류 해결
최근에 React 프로젝트에 TypeScript를 추가하다가 react-router의 Link 컴포넌트와 관련된 오류를 마주쳤다면 걱정하지 마세요. 이 문제는 꽤 흔한 오류이며, 이 글에서는 이를 해결하는 방법을 알아보겠습니다.
오류 메시지
TypeScript를 사용하고 있으며 react-router에서 Link 컴포넌트를 가져올 때 다음과 같은 오류가 발생할 수 있습니다:
Module '"/path/to/project/node_modules/@types/react-router/index"' has no exported member 'Link'.이 오류는 실제로는 버전 3의 react-router를 사용하면서 버전 4의 타입 선언을 설치해놓은 경우에 발생합니다. 최신 버전의 react-router에서는 많은 컴포넌트가 react-router-dom 패키지로 이동되었기 때문에 버전 4의 타입 선언은 사용 중인 버전과 호환되지 않습니다.
해결 방법
이 문제를 해결하려면 다음 단계를 따르세요:
단계 1: 잘못된 타입 선언 제거하기
먼저, 버전 4의 react-router에 대한 잘못된 타입 선언을 제거해야 합니다. 터미널을 열고 다음 명령을 실행하세요:
npm un @types/react-router단계 2: 올바른 타입 선언 설치하기
다음으로, 다음 명령을 실행하여 버전 3의 react-router에 대한 올바른 타입 선언을 설치하세요:
npm i --save-dev @types/react-router@3버전 3의 타입 선언을 설치함으로써 TypeScript는 이제 Link 컴포넌트를 올바르게 인식할 수 있게 됩니다.
결론
이 글에서는 react-router의 Link 컴포넌트 사용 시 발생하는 TypeScript 오류에 대해 다루었습니다. 올바른 타입 선언이 설치되어 있다면 이 오류를 해결하고 TypeScript를 사용한 React 프로젝트를 원할하게 진행할 수 있습니다. 즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/44420631/react-router-link-typescript-error
같은 카테고리의 다른 글 보기 :
