React Router v6

평소처럼 react-router-dom을 사용하던 중, Switch, useHistory등이 작동하지 않는 것을 알게되었다.
그래서 찾아보니 v5 -> v6로 업그레이드되면서 몇 가지 문법이 바뀌었다고 한다.😲
바뀐 문법들을 블로그에 정리하면서 공부해보자✍
공식 Qhick Start 사이트

1. Switch 대신 Routes📌

기존에 사용하던 Switch가 사라지고 Routes로 대체되었다.
Routes는 경로를 Switch와 다르게 순서대로가 아닌 가장 일치하는 라우트를 선택 하게된다.

<Routes>
	<Route ..... />
    <Route ..... />
    <Route ..... />
<Routes/>

2. useHistory 대신 useNavigate📌

	const navigate = useNavigate();
	navigate('/');
	navigate(-1);
	navigate(`/user/${user._id}`);

3. useRouteMatch가 사라짐 대신, 상대 경로 사용 가능📌

<Link to="" />; 
// 현재 페이지로 이동
<Link to="about">; 
// 상대경로 사용(현재url/about), to="/about"으로 하면 baseUrl/about으로 이동
<Route path="" />
<Route path="about" />

4. Route는 Routes의 직속 자식이어야함📌

또한, 렌더링할 페이지는 Route의 자식요소 또는 Component에 두는 것이 아닌 Element사용

<Routes>
	<Route path="/" element={<Home /> />
<Routes/>

5. Route에 exact Prop 사라짐📌

대신 exact가 기본 값으로 되어있으며 서브 경로를 위해선 path뒤에 /*를 붙이면 된다.

	<Route path="/movie/*" element={<Movie />} />

6. Optional URL 파라미터 사라짐. 필요하면 Route 2개 만들어야 함📌

기존 코드

<Route path="/optional/:value?" component={Optional} />

v6 코드

<Route path="/optional/:value?" element={<Optional />} />
<Route path="/optional" element={<Optional />} />

그 외의 내용들은 REFERENCE에 있는 Minjun Kim님의 유튜브영상을 확인하시길..🖐

#REFERENCE

Minjun Kim - React Router v5 → v6 빠르게 훑어보기