[React/Error] useRoutes() may be used only in the context of a <Router> component : <BrowserRouter> 추가

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

react-router-dom 라이브러리를 import하여 Route, Routes 등을 사용하려 할 때 발생하는 에러

해당 라이브러리를 사용하기 위해서는 index 파일에서 App 컴포넌트를 <BrowserRouter> 컴포넌트로 감싸주어야 한다.

 

index.js / index.tsx (전)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

 

index.js / index.tsx  (후)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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