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

처음 공부하면서 만든 예제에서 useNavigate를 쓰면서 만든 예제를 참고해서 구현하다가 만난 에러 

 

nav사용한 예제 

import Home from "./pages/Home"
importReactfrom "react";
import {Routes, Route,Link, useNavigate} from "react-router-dom";
import About from "./pages/About";
import Counter from "./pages/Counter";
import Input from "./pages/Input";
import Input2 from "./pages/Input2";
import List from "./pages/List";
import Test from "./pages/Test";

function App() {
    return (
        <div className="App">
            <nav>
                <Link to="/">Home</Link> | <Link to="/about">About</Link> | <Link to="/counter">Counter</Link> |
                <Link to="/input">Input</Link> | <Link to="/input2">Input2</Link> | <Link to="/list">List</Link>

            </nav>
            <Routes>
                <Route path="/" element={<Home />}/>
                <Route path="/about" element={<About />}/>
                <Route path="/counter" element={<Counter />}/>
                <Route path="/input" element={<Input />}/>
                <Route path="/input2" element={<Input2 />}/>
                <Route path="/list" element={<List />}/>
                <Route path="/test" element={<Test />}/>
            </Routes>

        </div>
    );
}

export default App;

 

에러가 난 코드 

import './App.css';
import axios from "axios";
import {useEffect} from 'react';
import {Routes, Route} from "react-router-dom";
import Home from "./pages/Home";

function App() {
    const callApi = async()=>{
      axios.get("/api").then((res)=>{console.log(res.data)});
    };

    useEffect(() => {
      callApi();
    }, []);


    return (
        <div className="App">
            <h1>안녕하세요 프론트 페이지 입니다.</h1>

            <Routes>
                <Route path="/" element={<Home />}/>
            </Routes>

        </div>
    );
}

export default App;

"useRoutes는 <Router>로 감싸야합니다." 라고 알려 줌. 찾아보고 코드 수정

예제는 바로 <Routes> 태그를 사용했는데 수정할 때는 <Routes> 태그를 <Router>로 감싸줘야 했다.

import 부분도 수정 

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

<Router>
<Routes>
    <Route path="/" element={<Home />}/>
</Routes>
</Router>

수정한 코드

import './App.css';
import axios from "axios";
import {useEffect} from 'react';
import {BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";

function App() {
    const callApi = async()=>{
      axios.get("/api").then((res)=>{console.log(res.data)});
    };

    useEffect(() => {
      callApi();
    }, []);


    return (
        <div className="App">
            <h1>안녕하세요 프론트 페이지 입니다.</h1>
            <Router>
            <Routes>
                <Route path="/" element={<Home />}/>
            </Routes>
            </Router>
        </div>
    );
}

export default App;

참고 문헌 https://cocoon1787.tistory.com/828