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

원래 코드

import {  Route, Routes } from "react-router-dom";
import Page1 from "../page/Page1";
import Page2 from "../page/Page2";
import Page3 from "../page/Page3";

const IsRouter =()=>{
    return(
            <Routes>
            <Route path="/" element={<Page1/>}/>
            <Route path="/page2" element={<Page2/>}/>
            <Route path="/page3" element={<Page3/>}/>
            </Routes>

    )
}

export default IsRouter

🤨 오류

전에 하던데로 이렇게 작성했더니 아래와 같은 오류가 발생했다.

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

열심히 구굴링해보니...

"useRoutes는 로 감싸야한다고 한다.
찾아보니 Router가 버전6으로 업데이트 되면서 사용법이 바뀐것 같다.

바뀐 코드

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Page1 from "../page/Page1";
import Page2 from "../page/Page2";
import Page3 from "../page/Page3";

const IsRouter =()=>{
    return(
        <Router>
            <Routes>
            <Route path="/" element={<Page1/>}/>
            <Route path="/page2" element={<Page2/>}/>
            <Route path="/page3" element={<Page3/>}/>
            </Routes>
        </Router>

    )
}

export default IsRouter
  

이렇게 작성하니 잘 나온다. 휴휴휴....