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의 기능을 대체 가능

기존 코드

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를 쓸 필요가 없어짐.

기존 코드

function App() { const match = useRouteMatch(); console.log(match); // { path: '/', url: '/', isExact: true, params: {} } return ( <> 현재url이동; 현재url/about이동 ) } export default App

v6 코드

function App() { return ( <> 현재url이동; 현재url/about이동 ) } export default App

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/11 by ccl(A) rewrite - 2021-12-29 16:26:48