react router dom v6

react-router-dom이 v5에서 v6로 업데이트 하면서 변경된 점을 알아보려고 한다.

번들 사이즈 감소

이전 버전 대비 약 70% 정도의 크기가 줄어들었다.

switch → routes 네이밍 변경

기존의 route들을 구성하는 부모 요소를 switch 라는 네이밍으로 사용하였는데 route의 복수개를 뜻하는 routes로 이름이 변경되었다.

// v5
<Switch>
  <Route ... />
</Routes>

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

exact 옵션 삭제

기존의 / 라우트의 경우 React Router의 디폴트 매칭 규칙으로 인해 앞부분만 일치해도 전부 매칭되기 때문에 정확히 일치시키고자 exact 속성을 사용하였으나, v6부터는 기본적으로 정확히 일치하도록 매칭 규칙이 변하여 exact 옵션은 사라졌다. 만약 v5처럼 하위 경로에 여러 라우팅을 매칭시키고자 한다면 *를 사용하여야 한다.

// categores 로 시작되는 모든 라우팅 매칭
<Route path='categories/*' />

component → element로

Route 컴포넌트의 component 속성이 사라지고 element 속성이 생겼다.

// v5
<Route path="/" component={Home} />

// v6
<Route path="/" element={<Home />} />

상대 경로 사용 가능

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
	/* <Users> element는 URL이 /USERS/*와 일치할 때 렌더링되기 때문에
		 <Route path> 와 <Link to> 값은 자동으로 /users URL 접두사가 추가된다.
	*/
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="/" element={<UsersIndex />} />
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

따라서 v5에서 처럼 match.path나 match.url을 사용할 필요가 없다.

그 밖에도 많은 것이 추가되고 달라졌다.

참조

React Training: React Router v6 Preview

react-router v6에서는 어떤것들이 변했을까?? (woolta.com)