'Uncaught Error: useLocation() may be used only in the context of a <Router> component.' 에러 해결방법

MBTI 테스트 같은 테스트를 만들고 있는 과정에서 home 페이지에서 test 페이지로 그리고 test 페이지에서 result 페이지로 이동할 때 매끄러운 Page Transition을 주기 위해서 AnimatePresence를 Router에 사용했는데 그 때 에러가 발생했다.

 

<Before>

App.tsx

function App() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <BrowserRouter>
        <Routes key={location.pathname} location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/test" element={<Test />} />
          <Route path="/result" element={<Result />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    </AnimatePresence>
  );
}

맨 처음에는 이런 식으로 코드를 짰는데 계속해서 'Uncaught Error: useLocation() may be used only in the context of a <Router> component.' 에러가 발생했다. 그래서 구글링을 통해 StackOverFlow 에서 해결 방법을 찾아낼 수 있었다.

 

답변은 index.tsx 파일에서좀 더 명확하게 App을 BrowserRouter로 감싸라는 해결 방법이었다. 그래서 추후 해결한 코드로는

 

<After>

App.tsx

function App() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <Routes key={location.pathname} location={location}>
        <Route path="/" element={<Home />} />
        <Route path="/test" element={<Test />} />
        <Route path="/result" element={<Result />} />
      </Routes>
      <Footer />
    </AnimatePresence>
  );
}

 

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <GlobalStyle />
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);