react-router가 v6으로 변경되면서 기존에 사용하던 v5와 다른점을 정리해요.
import { Switch } from "react-router-dom" // before
import { Routes } from "react-router-dom" // after
Switch가 Routes로 변경되었어요.
<Route component={Home} /> // before
<Route element={<Home />} /> // after
component 가 element 로 변경되었어요.
그리고 한가지 유의해야 할 점은 element={Home}이 아닌
element={<Home />} 처럼 컴포넌트 형태로 전달해야 해요
<Route path="/home" /> // before
<Route path="home" /> // after
절대경로만 가능했던 path에 상대경로도 가능하게 바뀌었어요.
// 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 로 변경되었어요.
// before
<Redirect to="about" />
<Redirect to="home" push />
// after
<Navigate to="about" replace />
<Navigate to="home" />
Redirect에서 Navigate로 변경되었어요.
지금까지 v5 에서 v6으로 변경되며 바뀐 점들을 알아보았는데요.
위 내용말고도 변경된 점들이 많으니 공식문서 에서 테스트 해보는 것도 좋을것 같아요