A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>. 해결 방법

 

 

이번 글에서는 A  is only ever to be used as the child of  element, never rendered directly. Please wrap your  in a <Routes>. 에러 해결 방법에 대하여 알아보겠습니다.

 

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

 

 

[에러가 발생한 코드]

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import ReactRouter1 from './ReactRouter1';
import ReactRouter2 from './ReactRouter2';

function App() {
  return (
    <div className="App">
      <Route exact path="/ReactRouter1" element={<ReactRouter1/>}/>
      <Route exact path="/ReactRouter2" element={<ReactRouter2/>}/>
    </div>
  )
}

export default App;

 

 

[에러 원인]

react-router-dom version 6이상부터는 <Route/>를 <Routes/> 안에 감싸줘야 합니다. 버전이 업데이트 되면서 사용법이 조금 바뀐 것 같습니다.

 

 

[해결 방법]

<Route/>를 <Routes/> 안에 감싸서 사용하거나 기존에 사용하시던 버전으로 버전을 수정하시면 됩니다.

1. <Route/>를  <Routes/>안에 감싸서 사용하여 해결 (권장)

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import ReactRouter1 from './ReactRouter1';
import ReactRouter2 from './ReactRouter2';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/ReactRouter1" element={<ReactRouter1/>}/>
        <Route exact path="/ReactRouter2" element={<ReactRouter2/>}/>
      </Routes>
    </div>
  )
}

export default App;

 

2. 기존에 사용하시던 버전으로 버전을 수정하여 해결

npm install react-router-dom@5.3.0