React Router v6 업데이트 정리

React Router v6 업데이트 정리

React-Router

velopert님의 영상을 토대로 정리한 블로그 글입니다.

동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!

React Router v6 정식 릴리즈

React Router v6가 정식으로 릴리즈 되었다. 공식문서

그 동안 사용했던 React Router의 문법이 조금 바뀌었는데

v5문법에 많이 익숙해서 그런지 v6문법과 v5문법이 많이 헷갈린다. ㅎㅎ..

그럼 어떤점이 바뀌었는지 한번 보자

Switch가 사라지고, Routes 등장

Routes 는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다.

는 기존 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes 로 기존 Switch 의 기능을 대체 가능

import React, { useState } from 'react' export const ConditionalRenderingWhenTrueGood = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( Toggle the text {showConditionalText && The condition must be true!} ) }

기존 코드

v6 코드

useHistory가 사라지고, useNavigate 등장

useNavigate로 기존에 useHistory의 기능을 전부 대체 가능

useHistory의 history는 객체였지만 useNavigate의 navigate는 함수다.

기존 코드

const history = useHistory(); history.push('/'); history.goback(); history.go(-2); history.push(`/user/${user._id}`);

v6 코드

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

useRouteMatch가 사라짐 대신에 상대 경로를 쓸 수 있게 됨

상대 경로를 사용할 수 있게되면서 굳이 useRouteMatch를 쓸 필요가 없어짐.

기존 코드

const match = useRouteMatch(); console.log(match); // { path: '/', url: '/', isExact: true, params: {} } ; // 현재 url 로 이동 ; // 현재 url에 /about을 붙인곳으로 이동

v6 코드

; // 이렇게 입력시 현재 페이지로 이동 ; // 이렇게 입력시 현재 url에 /about을 붙인 곳으로 이동 *단 about앞에 /about을 붙이게되면 진짜 /about으로 이동되니 현재 기준으로 하려면 앞에 슬래쉬를 빼줘야함

Route에 children이나 component가 사라지고, 대신에 element 사용

기존 코드

v6 코드

} /> } />

기존 Route는 꼭 Switch 안에 없어도 됐지만, v6의 Route는 Routes의 직속 자식이어야 함

기존 코드

v6 코드

} /> } />

Route에 exact Prop 사라짐(exact가 기본으로 되어있음)

기존 코드

v6 코드

} />

서브 경로가 필요한 경우 path에 * 사용

기존 코드

v6 코드

} />

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

기존 코드

v6 코드

} /> } />

서브 라우트를 구현하는 또 다른 방법 Outlet

기존 코드

App.js

UserPage.js

v6 코드

App.js

}> } /> } />

UserPage.js

NavLink에 activeStyle, activeClassName 사라짐

기존 코드

Messages Messages

v6 코드

({ color: isActive ? 'green' : 'blue' })}> Messages "nav-link" + (isActive ? " activated" : "") }> Messages

from http://doiler.tistory.com/10 by ccl(A) rewrite - 2021-12-29 11:00:58