[React] Router 오류 (6.x.x 버전에서 바뀐 사용법)

 

npm install react-router-dom

<div>
      <Route path="/" exact={true} component={Home} />
      <Route path="/Finder" component={Finder} />
      <Route path="/Subscribe" component={Subscribe} />
</div>

 

평화로운 유튜브 클론코딩...
평소처럼 라우터를 이용해서 페이지를 구성하기로 마음먹고 라우팅을 했는데..

 

Error: A <Route> is only ever to be used as the child of <Routes> element

 

당황스러운 오류가 떴다.

Route 를 Routes 로 감싸라고 한다..

찾아보니 Router가 버전6으로 업데이트 되면서 사용법이 바뀐모양

그래서 에러가 친절하게 설명하는대로 태그를 감싸줬다.

(물론 임포트도 새로 했다)

 

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

//...

function App() {
  return (
    <Routes>
      <Route path="/" exact={true} element={<Main />} />
      <Route path="/Finder" element={<Finder />} />
      <Route path="/Subscribe" element={<Subscribe />} />
    </Routes>
  );
}

 

근데..

Error: useRoutes() may be used only in the context of a <Router> component

 

이번에는 또 라우터로 꼭 감싸야한다는 오류가 생겼다 ㅠㅠ
왜이렇게 까다로워졌는지 모르겠다ㅠ

아무튼 시키는대로 고분고분 감싸줬다

반응형

 

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact={true} element={<Main />} />
        <Route path="/Finder" element={<Finder />} />
        <Route path="/Subscribe" element={<Subscribe />} />
      </Routes>
    </Router>
  );
}

 

그랬더니 오류 없이 잘 됨