[React.js] 라우터 사용 시 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useState, useEffect } from "react";
import Movies from "./component/Movies";
import Home from "./routes/Home";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Home></Home>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

 

강의를 보며 위와 같은 코드를 작성한 후 실행하니 아래와 같은 오류 발생

react-router-dom에서 Switch를 찾을 수 없단다.

검색해보니 react-router-dom이 v5에서 v6로 올라가며 기존의 Switch를 Routes로 바꿨다고 한다.

 

그래서 Switch를 Routes로 바꿔보니 또 에러.

 

Routes의 자식요소는 <Route>나 <React.Fragment>만 가능하다고 한다.

그러면 어떻게하지? 역시 검색.

리액트라우터 공식문서를 보니 Route 사이에 컴포넌트를 넣지 않고

Route의 element에 prop 형식으로 컴포넌트를 전달하고 있다.

https://reactrouter.com/en/main/components/routes

Routes v6.5.0

 

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useState, useEffect } from "react";
import Movies from "./component/Movies";
import Home from "./routes/Home";

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

export default App;

위와 같이 수정을 하니 정상적으로 실행이 된다.