[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-router-dom 사용시 error 대처 방법

 

기존 작성 방법

import { BrowserRouter, Route } from "react-router-dom";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
    </BrowserRouter>
  );
}

export default App;

 

Error message

시키는 대로 <Routes>로 감싸도 해결되지 않는다.

 

해결 방법<2022-02-26, react-router-dom V6>

react-router-dom 라이브러리가 업데이트되면서 <Route>의 매개변수 이름이 변경되었다. 

따라서 이전 버전을 설치하여 사용하던가 최신 버전에 맞게 작성하면 된다.

 

최신 버전 작성 방법

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

React Router 페이지 Documentation에서 자세한 내용을 확인할 수 있다.

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

React Router | Overview