Invariant failed You should not use <Route> outside a <Router>

Invariant Failed You Should Not Use <Route> Outside a <Router>

문제 상황

개발 중, 리액트 애플리케이션에 react-router-dom을 사용하여 페이지 라우팅을 구현하려고 할 때 아래와 같은 에러 메시지가 발생했습니다.

에러 메시지

Error: Invariant failed: You should not use <Route> outside a <Router>

이 메시지는 <Route> 컴포넌트가 <Router> 컴포넌트의 외부에서 사용되었을 때 나타납니다.

원인 분석

• <Route> 컴포넌트는 반드시 <Router> 컴포넌트(예: <BrowserRouter>, <HashRouter>)의 내부에 위치해야 합니다. 이 규칙이 지켜지지 않으면 라우팅이 제대로 작동하지 않습니다.
• 프로젝트 구조상 <Router> 컴포넌트의 포함이 누락되었거나, 잘못된 위치에 배치된 경우가 있을 수 있습니다.

해결책

1. <Router> 컴포넌트 확인

• 모든 <Route> 컴포넌트가 <BrowserRouter> 안에 존재하는지 확인합니다. 이는 라우팅이 올바르게 작동하기 위한 필수 조건입니다.

2. 애플리케이션 구조 재검토

• 애플리케이션의 최상위 레벨에서 <BrowserRouter> 컴포넌트를 사용해 전체 앱을 감싸야 합니다. 이렇게 하면 모든 하위 컴포넌트에서 라우팅 기능을 사용할 수 있습니다.

올바른 구조 예제

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

추가 팁

• Routes 컴포넌트는 React Router v6 이상에서 Switch 대신 사용됩니다. 하나의 Routes 컴포넌트 내에서 여러 Route를 정의하여 다양한 경로와 컴포넌트를 매핑할 수 있습니다.
• 경로에 매개변수를 사용하여 동적 라우팅을 구현할 수 있습니다. 예: <Route path="/users/:id" element={<UserPage />} />