2021년 11월 부터 React Router v6 버전이 나왔다
# npm
npm add react-router-dom
# yarn
yarn add react-router-dom
package.json
에서 추가된것을 확인할 수 있다package.json
을 손대고 나서 서버 재부팅 필수...Switch
대신 Routes
로 표기하게 바뀌었다페이지 이동시 사용했었던 useHistory
대신 useNavigate
로 사용된다
useHistory
는 객체였었지만, useNavigate
는 함수라서 사용법이 약간 다르다
다음 두 코드의 결과는 같다
// React Router v5
const history = useHistory();
history.push("/");
history.goBack();
history.go(-2);
// React Router v6
const navigate = useNavigate();
navigate("/");
navigate(-1);
navigate(-2);
현재 경로에 기반하여 Link
, Route
를 설정하기 위해 사용했었던 useRouteMatch
가 삭제
useRouteMatch
가 없더라도 상대경로로 설정할 수 있게 되었다
다음 두 코드의 {user}
에는 현재 매치되어있는 Route
의 경로로 이동한다
// React Router v5
const match = useRouteMatch();
<Link to={match.url}>
{user}
</Link>
// React Router v6
<Link to="">
{user}
</Link>
주의
되어 있는 부분 Link
경로에 /
를 넣게 된다면 /about
페이지로 간다는 뜻 // React Router v5
const match = useRouteMatch();
<Link to={`${match.url}/about`}>
About
</Link>
// React Router v6
<Link to="about"> // <- 주의
About
</Link>
기존 Route
에 사용하던 children
과 component
props
가 아닌 element
라고 하는 props
를 사용해야함
다음과 같이 바뀐다
// React Router v5
<Routes>
<Route path="/">
<Home />
</Route>
<Route path="/board/:id">
<Board />
</Route>
</Routes>
// React Router v6
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/board/:id" element={<Board />}/>
</Routes>
Route
를 독립적으로 사용하는 경우가 있었는데, 이제는 Routes
를 감싸서 직속 자식으로 사용해야 한다Route
에 주어진 경로와 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여주는 exact
가 삭제되었다
현재 v6
에서는 삭제된 exact
속성을 기본적으로 가지고 있으며, exact
속성이 필요하지 않다면 *
를 통하여 설정할 수 있다
다음과 같이 바뀐다
// React Router v5
<Routes>
<Route path="/" exact>
<Home />
</Route>
<Route path="/board/:id">
<Board />
</Route>
</Routes>
// React Router v6
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/board/:id/*" element={<Board />}/>
</Routes>
Optional URL
파라미터를 사용하기 위해서 Route
를 두번 선언하는 것으로 바뀌었다
다음과 같이 바뀐다
// React Router v5
<Routes>
<Route path="/board/:id?">
<Board />
</Route>
</Routes>
// React Router v6
<Routes>
<Route path="/board/:id" element={<Board />}/>
<Route path="/board" element={<Board />}/>
</Routes>
서브 라우트를 좀더 깔끔하게 사용 가능
컴포넌트에서 Routes
가 사용되는 자리에 <Outlet />
을 남기고 Routes
의 children
인 Route
들은 App.js
에서 해당 Route
의 children
으로 옮기면 된다
현재 컴포넌트가 활성화 되어있다면 특별한 스타일을 추가할 수 있는 NavLink
설정 사용법이 약간 바뀌었다
activeStyle
변경
// React Router v5
<NavLink to="/messages"
style={{ color: 'blue' }}
activeStyle={{ color: 'green' }}>
Message
</NavLink>
// React Router v6
<NavLink to="/messages"
style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
Message
</NavLink>
activeClasssName
변경// React Router v5
<NavLink to="/messages"
className="nav-link"
activeClassName="activated">
Message
</NavLink>
// React Router v6
<NavLink to="/messages"
className={({ isActive }) => "nav-link" + (isActive ? "activated" : "")}>
Message
</NavLink>