[React Router]사용 시 react-router-dom 설정 에러(5버전→6버전)

안녕하세요. 에러노트입니다.

react-router-dom 버전 5 -> 버전 6으로 변경되면서 생긴 에러들을 정리했습니다.

에러가 났던 부분과 수정사항을 살펴봅시다.

---

발생했던 에러는 2가지 입니다.

1. Switch가 더이상 react-router-dom에 존재하지 않기에, undefined 문제가 발생하여 다음과 같은 에러 문구가 출력되었습니다.

2. Home 컴포넌트로 이동하기 위해 사용하는 Route에 element가 없어서 생긴 에러입니다.

에러가 발생하였던 구문은 아래와 같습니다.

//에러가 발생하는 코드
import { Route, BrowserRouter as Switch, Routes } from 'react-router-dom';
import Home from './routers/Home';

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

export default App;

해당 코드를 수정해보면,

1. Switch컴포넌트가 Routes 컴포넌트로 대체하기. (Switch -> Routes)

2. Route컴포넌트에 props 설정 방법이 바꾸기. (element라는 props 값에 이동할 컴포넌트의 명을 작성합니다.)

//수정 후
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import Home from './routers/Home';

function App() {
  return (
    <Router>
      <Routes> {/* Switch -> Routes로 쓰입니다. */}
        <Route path="/" element={<Home />} /> {/* 이와 같이 수정되었습니다. */}
      </Routes>
    </Router>
  );
}

export default App;

 

도무지 무엇이 문제인지 또 삽질을 한 김에 바로 기록해두었습니다.

혹시나 제가 잘못 이해하거나 더 나은 해결방법이 있다면 댓글로 알려주시면 성장에 도움이 됩니다.

오늘도 읽어주셔서 감사합니다. 들쭉날쭉한 여름 날씨에 냉방병과 더위 조심하시길 바랍니다. :)