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

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>로 감싸라는 오류가 출력됐다.

 

그런데 Mac환경에서는 정상 작동하다가 플랫폼을 옮기니 이 오류가 발생해서 의아했다.

 

원인과 해결

react-router 6버전부터 <Routes>로 <Route>를 감싸는게 강제되었기 때문이다

 

return (<div>
    <Route exact path='/' render={<p>hi</p>}/>
    <Route exact path='/test' render={<p>hi test</p>}/>
  </div>)

버전 5까지는 위처럼 작성할 수 있었지만 버전 6부터는 아래처럼 작성해줘야 한다

 

return (<div>
    <Routes>
      <Route exact path='/' render={<p>hi</p>}/>
      <Route exact path='/test' render={<p>hi test</p>}/>
    </Routes>
  </div>)

 

Mac에서는 됐던 이유?

package.json에 react-router의 버전이 latest로 되어있었기 때문이다.

 

과거 5버전이 최신 버전일때 설치하고 package.lock에 5.2.1 버전으로 박혀있었기 때문에 Mac에서는 문제가 없었지만

새로 워크스페이스로 사용중인 우분투와 윈도우에서는 latest, 즉 6버전을 사용한 것이 문제다.

 

따라서 latest를 ^5.2.1로 변경해주고,

yarn.lock, package-lock.json, node_modules 를 전부 삭제한 후 다시 모듈을 설치했다.

(^는 명시한 버전보다 높은 버전 중 호환되는 버전+ 첫 자리(5) 버전은 바뀌지 않음)