[React 에러] Uncaught Error: useNavigate() may be used only in the context of a <Router> component.

nav 버튼을 클릭하면 해당 페이지로 이동하는 기능을 navigate를 사용해서 구현하려 했다. 그때 오류가 발생했고 읽어보니 <Router> 구성 요소의 컴포넌트 밖에서 useNavigate()를 사용할 수 없다는 경고 메시지였다.

 

처음에는 당황했지만 알고 보니 단순한 에러였다.

 

Header 컴포넌트 내에서 navigate를 사용했는데 Header 컴포넌트가 <BrowserRouter> 태그 밖에 존재하는 것이 문제가 되었다.

 

// 수정 전 App.tsx

// ...코드 생략

return (
  <AppWrapper>
    <Header />
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Mainpage />} />
      </Routes>
    </BrowserRouter>
  </AppWrapper>
)

// ... 코드 생략

 

아래 코드와 같이 Header 컴포넌트를 <BrowserRouter> 안으로 옮겨주니 바로 해결되었다.

// 수정 후 App.tsx

// ...코드 생략

return (
  <AppWrapper>
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path='/' element={<Mainpage />} />
      </Routes>
    </BrowserRouter>
  </AppWrapper>
)

// ... 코드 생략