[React] react-router-dom 설치 후 Route 시 오류 해결

 

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>.

 

구글번역기 결과

잡히지 않은 오류: <Route>는 <Routes> 요소의 자식으로만 사용되며 직접 렌더링되지 않습니다. <Route>를 <Routes>로 감싸주세요.

 

1. 문제 원인

react-router-dom 라이브러리가 버전 업데이트 됨으로써 <Routes> 부모요소 미적용 상태에서 <Route> 태그만을 사용했을 경우 에러 발생 

 

2. 문재 해결 방법

1. 최신버전에 맞게 작성한다.
2. 이전 버전을 설치한다.

 

최신버전에 맞게 작성하는 방법은 위의 링크에서 잘 설명이 되어있습니다.

저는 이전 버전을 재설치하는 방법으로 문제를 해결했습니다.

 

3. 문제 해결

작업 폴더의 yarn.lock 파일에서 react-router-dom을 검색해줍니다.

npm을 사용하는 분들은 package.json 파일에서 검색해주면 됩니다.

6.3.0 버전이네요

5.3.0 버전으로 다운그레이드 하겠습니다.

 

 

...

터미널이나 powerShell에서 

$ yarn add react-router-dom@5.3.0

$ npm install react-router-dom@5.3.0

5.3 버전으로 재설치 해줍니다.

출처: https://gallery-k.tistory.com/256 [Gallery-K]