🎯 React Router에서 Router는 왜 index.tsx에 있어야 할까?

useLocation 훅을 사용하려는데 자꾸 에러가 난다면, Router 위치를 의심해보세요!

---

🧩 문제 상황

React 프로젝트에서 다음처럼 AppRouter 내부에서 useLocation()을 사용하면서 Router까지 함께 선언하는 경우:

import { Router, useLocation } from "react-router-dom";

const AppRouter = () => {
  const location = useLocation(); // ❌ 여기서 에러 발생!

  return (
    <Router>
      {/* Routes 구성 */}
    </Router>
  );
};

이럴 때 다음과 같은 오류가 발생합니다:

❗useLocation() must be used within a <Router> component

---

✅ 이유: useLocation은 Router의 자식 컴포넌트여야 동작

React Router의 모든 훅들 (useLocation, useNavigate, useParams 등)은 내부적으로 Router Context를 참조합니다.
즉, 이 훅들이 정상 작동하려면 반드시 Router 컴포넌트 아래(자식)에서 호출돼야 해요.

---

✅ 해결 방법

🔧 Router는 index.tsx에, AppRouter는 경로 구성만

📁 index.tsx (또는 main.tsx)

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./AppRouter";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <AppRouter />
    </BrowserRouter>
  </React.StrictMode>
);

📁 AppRouter.tsx

import { Routes, Route, useLocation } from "react-router-dom";
import Header from "./components/common/Header";
import StudyRoomHeader from "./components/studyRoom/StudyRoomHeader";
import HomePage from "./pages/HomePage";
import StudyRoomPage from "./pages/StudyRoomPage";

const AppRouter = () => {
  const location = useLocation();
  const isStudyRoom = location.pathname.startsWith("/study-room");

  return (
    <>
      {isStudyRoom ? <StudyRoomHeader /> : <Header />}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/study-room" element={<StudyRoomPage />} />
      </Routes>
    </>
  );
};

export default AppRouter;

---

❓ 그럼 useLocation을 안 쓰면 Router를 어디에 둬도 되는 걸까?

✔️ 맞습니다.

만약 AppRouter 내부에서 useLocation()이나 useNavigate(), useParams() 같은 훅을 전혀 사용하지 않는다면,
Router를 AppRouter 안에 두더라도 기술적으로는 에러가 나지 않습니다.

하지만 이건 우연히 작동하는 것처럼 보일 뿐, 다음과 같은 단점이 있습니다:

---

🚫 내부에서 Router를 선언하면 생기는 문제점

문제	설명
❌ 위치 부적절	라우팅 환경과 구조를 한 컴포넌트에 섞게 됨
❌ 유지보수 어려움	추후 useLocation 사용 시 다시 구조 변경해야 함
❌ 컨텍스트 중첩 오류	중첩된 Router나 미묘한 버그 유발 가능

---

✅ 구조를 나누는 게 좋은 이유

장점	설명
✅ 안정성	모든 라우터 훅들이 안전하게 작동
✅ 역할 분리	index.tsx → 환경 제공, AppRouter.tsx → 경로 구성
✅ 확장성	이후 Layout, AuthRoute 추가하기 쉬움
✅ 예측 가능	동작 위치가 명확하므로 디버깅이 쉬움

---

🧠 정리

상황	Router 위치	설명
useLocation() 사용함	index.tsx (최상단)	반드시 필요
아무 훅도 사용 안 함	내부에 둬도 에러 없음	그러나 비추천

---

✨ 결론

“Hook을 쓰려면, 그 Hook을 인식할 수 있는 환경 안에 있어야 한다.”

React Router의 훅을 쓰고 싶다면 반드시 Router는 컴포넌트 외부, 보통은 index.tsx에 위치해야 합니다.
그렇지 않으면 훅은 작동하지 않거나 에러가 발생합니다.
안 쓰더라도 미래를 생각해 구조를 나눠두는 것이 더 좋은 선택입니다. 🌱