react-router 변경점 정리하기

react-router가 v6으로 변경되면서 기존에 사용하던 v5와 다른점을 정리해요.

- Switch 변경

import { Switch } from "react-router-dom"	// before

import { Routes } from "react-router-dom"	// after

Switch가 Routes로 변경되었어요.

---

- Component props 변경

<Route component={Home} />	// before

<Route element={<Home />} />	// after

component 가 element 로 변경되었어요.

그리고 한가지 유의해야 할 점은 element={Home}이 아닌

element={<Home />} 처럼 컴포넌트 형태로 전달해야 해요

---

- 경로 변경

<Route path="/home" />	// before

<Route path="home" />	// after

절대경로만 가능했던 path에 상대경로도 가능하게 바뀌었어요.

---

- useHistory 변경

// before
import { useHistory } from "react-router";
const history = useHistory();
history.push("/home");

// after
import { useNavigate } from "react-router";
const navigate = useNavigate();
Navigate("/home");

useHistory 에서 useNavigate 로 변경되었어요.

---

- redirect 변경

// before
<Redirect to="about" />
<Redirect to="home" push />

// after
<Navigate to="about" replace />
<Navigate to="home" />

Redirect에서 Navigate로 변경되었어요.

지금까지 v5 에서 v6으로 변경되며 바뀐 점들을 알아보았는데요.
위 내용말고도 변경된 점들이 많으니 공식문서 에서 테스트 해보는 것도 좋을것 같아요