[React.js] 리액트 useRoutes() may be used only in the context of a <Router> component.

리액트로 개발을 하다가 이런 오류가 났다.

import { Helmet } from 'react-helmet-async';
import { Route, Routes } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';

function App() {
    return (
        <>
            <Helmet>
                <title>제목</title>
            </Helmet>
            <Routes>
                <Route path="/login" element={<LoginPage />} />
                <Route path="/register" element={<RegisterPage />} />
            </Routes>
        </>
    );
}

export default App;

 

 

useRoutes()가 <Router> 컴포넌트 안에 있어야 된다는 것 같은데 useRoutes()가 Routes 말하는 것 같다.

 

그래서 두번째 줄의 import에 Router를 추가하고 <Routes> 부분을 <Router>로 감싸줬다.

import { Helmet } from 'react-helmet-async';
import { Route, Router, Routes } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';

function App() {
    return (
        <>
            <Helmet>
                <title>제목</title>
            </Helmet>
            <Router>
            	<Routes>
                	<Route path="/login" element={<LoginPage />} />
                	<Route path="/register" element={<RegisterPage />} />
            	</Routes>
            </Router>
        </>
    );
}

export default App;

그런데

또 오류 나와서 왜 그런지 찾아봤는데 <Router> 가 아니라 <BrowserRouter> 안에 있어야 된다고 한다.

import { Helmet } from 'react-helmet-async';
import { Route, BrowserRouter, Routes } from 'react-router-dom';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';

function App() {
    return (
        <>
            <Helmet>
                <title>제목</title>
            </Helmet>
            <BrowserRouter>
            	<Routes>
                	<Route path="/login" element={<LoginPage />} />
                	<Route path="/register" element={<RegisterPage />} />
            	</Routes>
            </BrowserRouter>
        </>
    );
}

export default App;

이제 오류 안 뜬다.