Error- React-router-dom 사용시 Invalid Hook Call Warning

리액트 복습 및 연습 겸 해서 

생활 기록 어플 만드는 과정에서 에러가 발생했다.

 

할일 목록을 거의 만들고 라우터로 다른 페이지 연결하고자 시도했는데 

 

import { React, useState } from "react";
import Menubar from "./components/Menubar";
import { BrowserRouter, Routes, Route, Link, Switch, Router } from "react-router-dom";

import TodoPage from "./pages/TodoPage";
import WorksoutPage from "./pages/WorksoutPage";
import ReadingPage from "./pages/ReadingPage";
import MeditationPage from "./pages/MeditationPage";

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Menubar />
        <Routes>
          {/* <Switch> */}
          <Route path="/" element={<TodoPage />} exact></Route>
          <Route path="/worksout" element={<WorksoutPage />}></Route>
          <Route path="/reading" element={<ReadingPage />}></Route>
          <Route path="/meditation" element={<MeditationPage />}></Route>
          {/* </Switch> */}
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default App;

 

'Invalid Hook Call ...' 어쩌구 하는 오류를 띄우면서 아래의 링크를 띄워줬다. 

 

Invalid Hook Call Warning

https://reactjs.org/warnings/invalid-hook-call-warning.html

Invalid Hook Call Warning – React

위 글에 따르면 

 

1. Mismatching Versions of React and React DOM

2. Breaking the Rules of Hooks

3. Duplicate React

 

 세 가지 원인 중에 하나일 것이라고 말하는데  

정확하게는 모르겠으나 이전까지 잘 되다가 router 시도한 이후에만 문제가 발생했기에 

세 번째 문제라고 판단했다. 

 

 

 

찾아본 결과 리액트가 중복(?)으로 깔려서 발생하는 오류라고 하고 터미널에 아래 명령어를 통해서 리액트 프로그램을 확인했다.

npm ls react
//설치된 리액트 모듈 확인

 

내 경우에는 아이콘을 넣기 위해서 설치한 react-icons라는 모듈과 중복된 것 같은데 

그렇다고 react-icons를 삭제 후 재설치 해보기도 했지만 오류는 계속됐고 그렇다고 react-icons를 삭제하기는 애매한 상황이었다.

 

 

 

더 서칭해본 결과 비슷한 오류에서 버전을 낮췄더니 해결됐다는 글을 보았다. 

 

그래서 버전을 react-router-dom@6.0.1까지 내려봤는데  

여전히 해결이 되지 않았다. 

 

 

 

결국엔 버전을 5.3.0까지 내리고,

 

이번에는 

export 'Routes' (imported as 'Routes') was not found in 'react-router-dom...'

라는 오류를 확인한 뒤 v5에 맞는 문법인 

<Routes> 와 element={} 를 

<Switch>와 component={} 로 바꿨더니  정상적으로 작동했다. 

 

 

다시 npm ls react로  리액트 모듈을 확인해보니 아래와 같았다.

 

 

 

---

저번에 올린 node관련 오류도 버전과 관련된 오류였다. 

코드가 정확해도 버전에 따라서 오류가 발생한다는 것이 까다롭게 느껴지지만 

이번 기회에 react-router-dom v5도 사용해 본 것에 의미를 두어야겠다.

 

최신버전으로 해결하는 것이 가장 좋겠지만 

너무 많은 시간을 써버려서 여러 번 시도 후에도 해결되지 않는다면 구버전으로 내려서 일단 진행하고 

이후에 신버전 문제를 해결하는 것도 효율적이라고 느꼈다. 

 

 

 

 

 

+참고

https://pimpdevelop.tistory.com/14

[에러해결] Invalid Hook Call Error