TIL 48 | React Router v6

이전에 개인적으로 했던 프로젝트를 보다가 react-roter가 v5로 되어 있어서 v6로 고치는 작업을 하였다.
추가적으로 오랜만에 포스팅도 할겸, V5에서 V6로 어떤 부분이 어떻게 바뀌었는지 살펴보도록 하자.
내용은 벨로퍼트님의 React Router v6 tutorial youtube 영상을 참고하였다.

1. Switch → Routes

V5 에서 Switch 용도
Switch - Route로 생성된 자식컴포넌트 중 첫번째로 매칭되는 Route를 렌더링해준다. Switch를 사용하지 않으면 "/" 경로를 접속했늗네 "/"가 포함된 "/login", "/logout", "/detail" 컴포넌트들이 다 렌더링 되는 불상사가 발생한다.

	<Switch>
    	<Route path="/" exact>
        </Route>
    </Switch>

V6에선 하단과 같이 Switch대신 Routes가 Route를 감싸게 되었다.
또한 exact prop을 사용하지 않는다.
exact 없이도 default 값으로, path가 정확하게 일치하는 것을 보여주도록 했기 때문이다.

<Routes>
    <Route path="/" exact>
    </Route>
</Routes>

2. useHistory → useNavigate

V5 에서 useHistory 용도
페이지 방문 기록을 쉽게 관리할 수 있었으며 여러가지 내장 함수를 사용해 뒤로가기, 특정 페이지로 이동하기 등을 구현할 수 있었다.

const history = useHistory();

<button Onclick={() => {
	history.push("/");}>  
<button Onclick={() => {
	history.goBack();}>
<button Onclick={() => {
	history.push(`/posts/${parseInt(id) + 1}`)}>
    

이제 더 이상 useHistory는 사용하지 않는다.
참고로 이제 사용하게 되는 useNavigate는 객체가 아니라 함수이다.
따라서, 뒤로 가기인 history.goBack(); 대신, navigate(-1)만 써도 된다.

const navigate = useNavigate();

<button Onclick={() => {
	navigate("/");}>  
// histiry.push 대신!

<button Onclick={() => {
	navigate(-1);}>
// history.goBack(); 대신!

<button Onclick={() => {
	navigate(`/posts/${parseInt(id) + 1}`)});}>

3. useRouteMatch가 사라짐.

useRouteMatch가 사라졌지만 대신 상대 경로를 쓸 수 있음
이전에는 현재의 경로에 기반하여 링크나 라우터를 설정하기 위해서 였다.
하지만 이제 상대경로를 설정할 수 있게 되었다.

<Link to={match.path}>

대신에

<Link to="">    

를 사용하면 된다. 또한 주소 앞에' / ' 를 더 이상 붙일 필요 없다.

<Route path={`${match.path}/about`}>
<Route path="about"> 

4. Route에 children이나 component → element

또한 Route는 Routes의 직속 자식이여야 한다

<Routes>
  <Route path="/posts/:id">
   <Post />
  </Route>
  <Route path="/posts/:username">
   <User />
  </Route>
</Routes>  

상단의 코드처럼 Route로 path를 주고, 해당 component를 넣는 대신,
하단 처럼 element에 component를 주도록 바뀌었다.

<Routes>
  <Route path="posts/:id" element={<Post />}>
  <Route path="/posts/:username" element={<User />}>
</Routes>  

1번에서 언급한대로 Route에 exact Prop 사라졌으므로(이제 기본적으로 갖고있다) 서브 경로가 필요한 경우 path에 *사용

( 여기서 * 는 '아무 텍스트나 매칭한다'는 뜻으로, 이 route element의 상단에 위치하는 route들의 규칙을 모두 확인하고, 일치하는 라우트가 없다면 이 라우트가 화면에 나타나게 된다. 이를 통해 404 페이지를 만들때 사용하게 된다. )

5. Optional URL parameter 사라짐

Optional URL parameter 필요하면 이제는 Route 2개를 만들자!

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

상단의 코드를 하단과 같이 만들면 된다.

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

6. Outlet

서브 라우트를 구현하는 또 다른 방법으론 Outlet이 있다.
User.js라는 파일에서 Routes를 사용했다고 해보자.

User.js

<div>
	<p>안녕하세요 여러분!</p>
	<Routes>
      <Route path="" element={<UserMain />}>
      <Route path="about" element={<About />}>
    </Routes>  
</div>

1) User.js에 있던 routes를 다 지워준다.
2) 그 부분에 대신 Outlet 을 써준다.
3) 그리고 해당 routes로 감싸져 있던 부분을 User 컴포넌트의
route를 쓰는 곳에 가서 하단과 같이 서브 라우트를 구현한다.

User.js

<div>
	<p>안녕하세요 여러분!</p>
	<Outlet />
</div>

app.js

<Routes>
    <Route path="posts/:id" element={<Post />}>
    <Route path="/posts/:username" element={<User />}>
	<Route path="/posts/:username/*" element={<User />}>
      <Route path="" element={<UserMain />}>
      <Route path="about" element={<About />}>
  	</Route>
</Routes> 

참고 자료 및 영상:
https://www.youtube.com/watch?v=CHHXeHVK-8U
https://velog.io/@velopert/react-router-v6-tutorial