React Router 관련 에러

Cannot read properties of null (reading 'useContext')

Cannot read properties of null (reading 'useRef')

---

페이지 전환을 위해 Router 작업을 하는 과정 중 다음과 같은 에러가 발생하였다.

 

 

(나의 해결방법)

멍청하게도 react-router dom을 설치하지 않고 사용하여 저런 오류가 발생하였다.

package.json에 다음을 추가하여 해결하였다.

"react-router-dom": "^6.2.1"

 

---

에러를 해결하는 과정에서 가끔 정상적인 환경에서도 저런 오류가 생김을 확인하고 여러 해결법을 미리 적어둔다.

 

1. 대부분 node_modules를 삭제 후 재설치를 먼저 권한다.

2. 프로젝트를 다시 만든 경우 해결되었다.

 

3. 에러에서 참고하라는 링크

위의 에러와 함께 https://react.dev/warnings/invalid-hook-call-warning 링크를 던져줬다.

원문을 해석하면

1. Hooks의 규칙을 안 지켜서 발생할 수 있다.
2. React와 React DOM의 버전이 일치하지 않아 발생할 수 있다.
3. 동일한 앱에 두개 이상의 React 사본이 있어 발생할 수 있다.

4. Node 버전을 바꿨더니 해결된 사례

https://github.com/vercel/next.js/discussions/43577#discussioncomment-5667001

TypeError: Cannot read properties of null (reading 'useContext') · vercel next.js · Discussion #43577

---

 

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

---

function App() {
  return (
    <div className="App">
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/calculate" element={<CalculatePage/>}/>
          <Route path="/statistics" element={<StatisticsPage/>}/>
        </Routes>
    </div>
  );
}
export default App;

 

위 코드를 실행하니 다음과 같은 에러가 발생했다.

 

<Routes> 를 <Router>로 감싸라는 의미라 추가하였다.

---

 

Cannot read properties of undefined (reading 'pathname')

---

위에서 하라는 대로 하였지만 또 에러가 발생했다.

 

<Router>로 감싸지말고 <BrowserRouter>로 감싸니 정상 작동하였다.

import MainPage from "./pages/MainPage/MainPage";
import CalculatePage from "./pages/Calculate Page/CalculatePage";
import StatisticsPage from "./pages/Statistics Page/StatisticsPage"
import { Routes, Route, BrowserRouter} from "react-router-dom";

function App() {

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage/>}/>
          <Route path="/calculate" element={<CalculatePage/>}/>
          <Route path="/statistics" element={<StatisticsPage/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

---

귀여운 수달

위의 모든 방법을 직접 실행하지 않았고, 개개인의 상황에 따라 해결 방안이 다를 수 있습니다.