[ React ] Uncaught Error: useRoutes() may be used only in the context of a <Router> component. 에러와 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') 에러

 

분명 회사에서 돌려봤을 때는 됐는데, 

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

이 에러가 떴다. 

 

import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Start from "./pages/PJTest/Start";
import Question from "./pages/PJTest/Question";
import Result from "./pages/PJTest/Result";

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/PJTest" element={<Start />} />
      <Route path="/PJTest/Question" element={<Question />} />
      <Route path="/PJTest/Result" element={<Result />} />
    </Routes>
  );
};

export default App;

 

해당 에러는 Router가 필요하다는 뜻이다.

import { Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Start from "./pages/PJTest/Start";
import Question from "./pages/PJTest/Question";
import Result from "./pages/PJTest/Result";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/PJTest" element={<Start />} />
        <Route path="/PJTest/Question" element={<Question />} />
        <Route path="/PJTest/Result" element={<Result />} />
      </Routes>
    </Router>
  );
};

export default App;

그래서 Router로 Routes를 감싸주고 react-router-dom에서 Router을 import 했다. 

그랬더니 

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

이 에러가 떴다. 

 

구글링해서 찾아보다가, 해결할 수 있었다.

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

import 부분을 이렇게 바꿔주었더니 더이상 에러가 나지 않았다. 

 

찾아보니 라우터는 

- BrowserRouter

- HashRouter 

컴포넌트를 가장 많이 사용한다고 한다. 

 

https://worker-k.tistory.com/entry/React-BrowserRouter%EC%99%80-HashRouter%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC

React BrowserRouter와 HashRouter의 차이점 정리

차이점을 찾아봤는데, 사실 아직 감은 안 온다..