조각조각 - Error: useRoutes() may be used only in the context of a <Router> component 에러 처리

에러 발생

react-router-dom이 6.0으로 업데이트 되면서 useRoutes 훅으로 라우트 구현이 가능해졌습니다. useRoutes 훅을 사용하면 기존 routes, route 컴포넌트를 통한 라우트 구현과 다르게 자바스크립트 객체로 간단하게 라우트 구현이 가능합니다.

하지만 아래와 같이 예제 코드를 작성하면 당황스럽게도 'Error: useRoutes() may be used only in the context of a < Router> component'에러를 맞이하게 됩니다.

Error: useRoutes() may be used only in the context of a < Router> component

App.tsx

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useRoutes } from "react-router-dom";

//Pages
import Start from "./pages/Start";
import Main from "./pages/Main";

function App() {
  const routes = [
    { path: "/", element: <Start /> },
    { path: "main", element: <Main /> }
  ];

  const router = useRoutes(routes);
  return router;
}

export default App;

이 에러의 원인은 useRoutes 훅이 실행되는 컴포넌트가 React Router 컴포넌트로 감싸져 있지 않기 때문입니다. 따라서 문제를 해결하기 위해 useRoutes 훅이 실행되는 컴포넌트를 React Router로 감싸주어야 합니다.

문제 해결 예시

CRA를 통해 프로젝트를 만들고 App.tsx에서 useRoutes 훅을 사용한 경우를 살펴보겠습니다.

위 코드 처럼 App.tsx에서 useRoutes 훅을 사용하면 제대로 실행될 거 같지만 에러가 발생합니다. 이때 App 컴포넌트를 감싸주기 위해 index.tsx로 이동하여 React Router로 감싸줍니다.

index.tsx

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);