react-router 라이브러리가 v5에서 v6로 업데이트하면서 많은것들이 바뀌었다.
얼마나 바뀌었는지 기존에 v5에서 구현해온 방식으로는 구현되지 않는다.
눈에 보이는 크게 달라진 점들만 리뷰를 해보려고 한다!
리액트 버전 준비 (React 16.8)이상 사용
React Router v6은 React 후크를 많이 사용하므로 React Router v6으로 업그레이드하기 전에 React 16.8 이상을 사용해야 합니다. 좋은 소식은 React Router v5가 React >= 15와 호환된다는 것입니다. 따라서 v5(또는 v4)를 사용 중이라면 라우터 코드를 건드리지 않고도 React를 업그레이드할 수 있어야 합니다.
React 16.8로 업그레이드했으면 앱을 배포해야 합니다. 그런 다음 나중에 다시 돌아와서 중단한 부분부터 다시 시작할 수 있습니다.
React Router v6 makes heavy use of React hooks, so you'll need to be on React 16.8 or greater before attempting the upgrade to React Router v6. The good news is that React Router v5 is compatible with React >= 15, so if you're on v5 (or v4) you should be able to upgrade React without touching any of your router code.
Once you've upgraded to React 16.8, you should deploy your app. Then you can come back later and pick up where you left off.
번들 사이즈 Down
React-router v5 보다 약 70% 정도의 크기가 줄어 들었다고 합니다. 버전 업데이트만 하더라도 번들에 대한 최적화가 된다는 의미가 될거 같습니다.
1. switch가 사라지고 routes로 사용한다.
기존에 route의 부모요소를 switch로 사용했는데 routes로 이름이 변경이 되었다. 참고로 v6에서 Switch를 사용하려고 하면 route객체에 switch가 없다고 오류가 뜬다.
// v5버전
<Switch>
<Route />
</Routes>
// v6버전
<Routes>
<Route />
</Routes>2. useHistory가 사라지고 useNavigate로 사용한다.
.push , .replace 도 사라지고 useNavigate로 사용한다.
//v5
const history = useHistory();
history.push('/');
history.replace('/login');
//v6
const navigate = useNavigate();
navigate('/login');
navigate('/login', {replace: true});
()=> navigate(-2) // 2페이지 뒤로가기
()=> navigate(1) // 1앞으로 가기3.exact 옵션 삭제
기존의 / 라우트의 경우 React Router의 디폴트 매칭 규칙 으로 인해 앞부분만 일치해도 전부 매칭되기때문에 정확히 라우트를 일치시키고자 exact 속성을 사용하였으나 v6부터 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 v6에서부터는 exact 의 옵션을 더이상 사용하지 않습니다. 만약 하위경로에 여러 라우팅을 매칭시키고 싶다면 다음과 같이 URL 뒤에 * 을 사용하여 일치시킬 수 있습니다.
<Route path= 'user/*' />
4. route에서 컴포넌트 렌더링
//v5
<Route path='user' component={UserInfo} />
<Route
path='user'
render={routeProps => (
<UserInfo routeProps={routeProps} isLogin={true} />
)}
/>
//v6
<Route path='user' element={<UserInfo />} />
<Route path='user' element={<UserInfo isLogin={true} />} />
5. useRouteMatch가 사라지고 outlet으로 상대 경로를 쓸 수 있다.
v5에서 사용하던 방식
import {
BrowserRouter,
Switch,
Route,
Link,
useRouteMatch
} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/user" component={User} />
</Switch>
</BrowserRouter>
);
}
function User() {
const { path } = useRouteMatch();
return (
<div>
<Switch>
<Route path={`${path}/detail`}>
<UserDetail />
</Route>
</Switch>
</div>
);
}v6
import {
BrowserRouter,
Routes,
Route,
Outlet
} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='user' element={<User />} >
<Route path='detail' element={<UserDetail />} />
</Route>
</Routes>
</BrowserRouter>
);
}
function User() {
return (
<>
<Outlet />
</>
)
}추천 => 링크 벨로퍼트님 Route6 강의
