React JS - react-router-dom version 6 와 gh-pages

 

 

React JS - react-router-dom version 6  와 gh-pages 

---

 

노마드코더님 강의를 보면서 리액트를 공부하고 있는데 

 

리액트 라우터 버전6이 새로나와서 거기에 맞게 작성하다보니 에러가 났다.

 

react-router-dom version 6를 쓰면 아래와 같은 에러가 발생 할 때가 있는데 

 

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

 

 

이럴 경우 Router 로 Routes 를 감싸면 해결된다.

 

그리고 gh-pages 에서 제대로 인식하기 위해서는 path 에 process.env.PUBLIC_URL을 붙여주어야 한다.

 

왜 그런지는 모르겠다.. 공식문서상 그렇다니까.. 그렇게 해야지..

 

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

function App() {
  return (
    // BrowserRouter as Router 로 감싸 주어야 동작함
    <Router>
      <Routes>
        {/* process.env.PUBLIC_URL를 붙여줘야 gh-pages 에서 인식함 로컬로 돌릴 떄에는 react/ 가 root가 됨 */}
        <Route path={`${process.env.PUBLIC_URL}/`} element={<Home />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </Router>
  )
}
export default App;