[React] (v6 Route 오류 해결) "useRoutes() may be used only in the context of a <Router> component."

 

import React from "react";
import { Route, Routes } from "react-router-dom";
import styled from "styled-components";

import Main from "./container/Main";
import Login from "./container/Login";
import BackgroundImg from "./img/todo_background.jpg";

const Background = styled.div`
  background-image: url(${BackgroundImg});
  background-position: center;
  width: 100vw;
  height: 100vh;
`;

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

export default App;

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

오류를 읽어보니 "useRoutes는 <Router>로 감싸야합니다."라고 하네요.

 

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

...

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

export default App;

 

import로 BrowserRouter as Router를 추가해주고 Router로 감싸주면 에러가 사라집니다.