useRoutes() may be used only in the context of a <Router> component. 해결 방법

 

토이 프로젝트에서 Route를 사용할 일이 있어 사용하는데 아래와 같은 에러가 발생하였습니다.

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

 

 

[에러 원인]

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.라는 에러를 해석해보면 useRoutes는 <Router>로 감싸야한다고 합니다. 저는 감싸지 않고 사용해서 에러가 발생한 거였습니다.

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Header>
        <Routes>
            <Route path="/Main" element={<Main/>} />
            <Route path="/Register" element={<Register/>} />
        </Routes>
      </Header>
    </Provider>
  </React.StrictMode>
);

 

 

[해결 방법]

먼저 BrowserRouter as Router를 추가해주고 Route를 Router로 감싸주시면 에러가 해결될 것입니다.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Header />
      <Router>
        <Routes>
          <Route path="/Main" element={<Main/>} />
          <Route path="/Register" element={<Register/>} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);