2021년 11월 부터 React Router v6 버전이 나왔다
버전 업그레이드
- 이전 버전을 사용하고 있다면 다음 명령어를 사용
# npm
npm add react-router-dom
# yarn
yarn add react-router-dompackage.json에서 추가된것을 확인할 수 있다
package.json을 손대고 나서 서버 재부팅 필수...
서버 재부팅 안해서 몇시간동안 고생했던적이 한두번이 아님
Switch -> Routes
- 기존에 자식들 중 처음으로 조건이 만족하는 하나의 페이지(컴포넌트)만 출력하도록 하는
Switch대신Routes로 표기하게 바뀌었다
useHistory -> useNavigate
-
페이지 이동시 사용했었던
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);
useRouteMatch 삭제
-
현재 경로에 기반하여
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, compenent 삭제
-
기존
Route에 사용하던children과componentprops가 아닌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를 독립적으로 사용하는 경우가 있었는데, 이제는Routes를 감싸서 직속 자식으로 사용해야 한다
Route에 exact props의 삭제
-
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 파라미터 삭제
-
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>
서브 라우트 Outlet ?
-
서브 라우트를 좀더 깔끔하게 사용 가능
-
컴포넌트에서
Routes가 사용되는 자리에<Outlet />을 남기고Routes의children인Route들은App.js에서 해당Route의children으로 옮기면 된다
NavLink 변경
-
현재 컴포넌트가 활성화 되어있다면 특별한 스타일을 추가할 수 있는
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>