React 에러 - Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

React의 Route를 이용하여 개발을 하던 중에 맞닥뜨린 에러입니다.

 

 

문제 원인

 

react-router-dom 라이브러리가 v6으로 업데이트되면서 호환이 안되는 부분이 생겼다고합니다.

 

https://reactrouter.com/docs/en/v6/getting-started/overview

React Router | Quick Start

 

 

해결 방법

 

1. 새로운 문법에 맞게 다시 작성

2. 이전 버전 사용

 

 

이전 버전 사용이 더 간편해서 저는 2번 방법으로 해결했습니다.

 

 

 

이전 버전으로 변경

아래 버전 중 1택

 

npm install react-router-dom@5.3.0

 

npm install react-router-dom@5.2.0

 

npm install react-router-dom@5.1.2

 



v5 (버전5)중 하나를 선택하면 됩니다. 가능하면 다운로드 수가 많은게 좋을듯합니다.

 

 

 

react-router-dom 버전 목록

 

https://www.npmjs.com/package/react-router-dom

react-router-dom