[React] 에러 : useRoutes() may be used only in the context of a <Router> component.

 

1. 에러상황

import Login from "./components/Login";
import {BrowserRouter as Router, Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';

function App() {
    return (
        <div className="App">
        
            <Routes>
                <Route path="/" element={<Login/>}/>
            </Routes>
        </div>
    );
}

현재 react-router-dom은 6.12.0 버전이다.

 

 

<Routes></Routes> 태그를 쓰기 위해선 <Router></Router> 태그로 감싸야 한다는 의미다.

 

 

2. 해결

import Login from "./components/Login";
import {BrowserRouter as Router, Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';


function App() {
    return (
        <div className="App">
            <Router>
                <Routes>
                    <Route path="/" element={<Login/>}/>
                </Routes>
            </Router>
        </div>
    );
}

BrowserRouter as Router를 추가해주고, 태그로  Routes 전체를 감싸주면 해결!