[React] 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-router-dom을 사용해서 라우터를 만들어서

컴포넌트를 불러오려고 했다.

/* 오류 발생 코드 */
import { HashRouter, Route } from 'react-router-dom';
import About from './routes/About';

function App() {
  return (
    <HashRouter>
        <Route path="/about" component={About} />
    </HashRouter>
  );
}

 

about안에 문구가 들어있고, 

해당 페이지를 불러오려고 했다.

 

그,런,데..

오류가 발생되었다.

 

 

 

💎오류코드

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>안에 넣어주고, 

Routes도 같이 import 해줘야 한다.

 

응. 그래도 오류.

 

"/"경로에 요소가 없어서 빈페이지래..

 

검색을 시작했다.

 

https://developer-ping9.tistory.com/214

[React] A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in

이분의 블로그에서 힌트를 얻을 수 있었는데, 

 

'react-router-dom'업데이트로 인해 <Route>의 매개 변수가 변경되었다고..!!

 

그래서 기존버전으로 새로 설치하거나, 

아니면 새로운 방법으로 진행해야 한다.

 

💎해결 완료 방법

 

오류발생 > 해결완료

1. import 할 때, Routes도 불러온다.
2. <Route>를 <Routes>로 감싼다.
3. <Route>의 component={About} 형태에서 element={<About/>} 으로 변경한다.

 

난 이전버전을 설치하기보다 이 방식을 쓰기로 했다.

 

고작 하루만에 문제가 발생되어 다운그레이드를 했다.

https://rosedaily101.tistory.com/51?category=960490 

[React] 버전 다운그레이드

되도록 강의 따라하는 거면, 버전 맞추고 진행하자..

 

 

기존 강의나 책들도 다 이렇게 되어있을텐데..

깃헙에서 그대로 소스 받아도 오류나서 한참 해맸다 ㅠㅠ

 

정리도 시간이 제법 걸리지만, 

이렇게 정리해야 시간 절감이 되겠지 :)