react-router사용과 v6에서의 switch의 변화

 

Lama Dev의 MERN stack 을 이용한 블로그 만들기를 학습하던 중, 블로그의 각 페이지(메뉴의 내부 페이지)를 라우팅할 수 있도록 react-router라이브러리를 이용하였다. 

 

🎬 React Router 시작하기

프로젝트에서 리액트라우터 라이브러리를 설치한다 

yarn add react-router-dom

프로젝트에서 라우터를 적용할 수 있도록 App.js에 요소들을 import해준다. 

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

라우팅하기 위해 만들어둔 페이지 컴포넌트를 요청 주소에 따라 연결될 수 있도록 Route 요소를 사용하여 연결한다. 

 

---

😈 react-router의 업그레이드, v6에서의 switch 오류

앞서 언급한 유튜브 강의의 react-router는 v5었고 v6가 적용되지 않은 상황이라 약간의 오류가 발생했다. 오류 메시지는 아래와 같다. 

export된 'Switch'요소를 react-router-dom에서 찾을 수 없고 그것 말고 다른 요소를 사용하라는 메시지, 라마님 (영어로 치기 귀찮으니 니 한국 구독자 편의상 라마님이라고 해야겠다)코드는 분명히 멀쩡하게 작동하였는데 (참고, 21.5.12 업로드 영상이다,, 따끈따끈☀️)

React Router 공식문서를 확인해보니 v6로 업그레이드가 되었고 그에 따른 다양한 변화들이 있겠지만 지금 내가 발생한 문제의 원인인 Switch 요소를 더이상 사용하지 않는다고 한다. 

v5에서 사용된 <Switch> 요소는 Route를 구성을 감싸기 위한 부모요소로 사용되었는데 업그레이드된 <Switch> 요소는 <Routes>로 변경되었고 단어로 유추할 수 있듯이 <Route path>와 <Link to> 에서 더 직관적으로 이어지는듯하다. (R부모에서 시작해서 R자식이 나오는게 더 이해가 쉽긴 하지)

 

⚠️  구 <Switch>를 사용한 코드

 <Router>
   <Switch>
   	<Route exact path="/">
   		<Home />
   	</Route>
   	<Route path="/register">
   		<Register />
   	</Route>
   </Switch>
</Router>

 

추가로 <Route> 요소의 component 속성은 element 속성으로 변경되었다. 커스텀 요소를 이용할 때의 복잡한 코드가 elemenet 요소에서는 간단하게 사용할 수 있다고 한다. 불편함을 경험해보지 못했지만 불편함을 느끼기전에 업그레이드된 v6를 접할 수 있게 되어 감사함을 느낀다. 

 

🔧  v6 에서의 <Router> 컴포넌트 사용

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

 

오류가 깔끔하게 해결되었다! 

야호 🙌  

---

🤔 소감입니다 

라마님의 블로그 강의가 21년 5월에 업로드 되었으니 그즘에는 정상 작동했던 코드였을텐데 (물론 react-router 라이브러리를 v5로 그대로 사용한다는 전제하에) 22년 1월 8일에는 작동하지 않는다니 정말 개발의 세계는 빠르고 또 빠르다 매번 업데이트 되는 기술에 감탄을 하면서도 벅참을 느끼기도 하지만... 

늘 새롭고 짜릿하다! 

 

불편한 내용이나 오류가 있다면 피드백 주세요 언제나 환영합니다. 개(복치)발자입미다,,,,,뻐끔,,,🐟

 

<출처>

https://v5.reactrouter.com/web/guides/quick-start
https://reactrouter.com/docs/en/v6/upgrading/v5
https://blog.woolta.com/categories/1/posts/211
https://react.vlpt.us/react-router/01-concepts.html