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

헤더 컴포넌트에 useNavigate 코드를 사용하려는데
계속 오류가 생기는 현상.

이유를 찾아보니

React Router의 컴포넌트 내에서만 useNavigate()를 사용해야한다는 것을 나타냅니다. 즉, 컴포넌트가 없는 경우 useNavigate()를 사용할 수 없습니다.

라고 설명이 되어있는데, 잘 이해가 가지 않았다.
원인은 app.js에 있었다

기존 app.js

function App() {
  return (
    <>
      <Header />
      <GlobalStyles />
      <Router />
    </>
  );
}

export default App;

헤더를 모든 페이지에서 공통으로 쓰기 때문에 app.js에 넣었는데, 이 부분이 문제였다.
라우터 밖에 헤더가 위치해 있어서, 라우터 컴포넌트와 별개가 되었기 때문이었다.

변경한 app.js

import Router from "./shared/Router";
import GlobalStyles from "./shared/GlobalStyle.js";

function App() {
  return (
    <>
      <GlobalStyles />
      <Router />
    </>
  );
}

export default App;

라우터 밖에 위치한 헤더를 빼내고
사용하는 페이지에 위치시켰다

헤더를 사용하는 Home 컴포넌트

const Home = () => {
  return (
    <>
      <Header /> //헤더 위치
      <MainTitle />
      <Layout>
        <Section1 />
        <Section2 />
      </Layout>
      <Banner />
      <Footer />
    </>
  );
};

export default Home;

이렇게 하니 오류가 해결되고 잘 작동이 되었다.