[React] react-router-dom v6

개요

사내에서 프론트엔드 개편에 앞서 react-router-dom을 적용해야하는데 최신 버전을 적용하고 싶기에 react-router-dom v6에 관련된 최신 스팩을 알아보도록 합시다.

 

React 16.8

react-router-dom은 React Hook을 많이 사용하므로 React 16.8버전 이상이어야 합니다.

 

Switch => Routes

• Switch가 Routes로 변경되었습니다.
• exact옵션 삭제
• component 방식 변경
  • component={COM 및 render={() => <h1>Hello</h1>}
• path 상대경로 기능 추가
• 기존의 Route들은 Switch안에 없어도 되지만, v6의 Route는 Routes의 직속 자식이어야한다.

 

useHistory => useNavigate

• useNavigate로 기존 useHistory 대체
• useHistory는 history객체였지만 useNavigate는 함수다.

// 기존코드
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를 사용할 필요가 없다.

// 기존코드
const match = useRouteMatch();
console.log(match); // { path: '/', url: '/', isExact: true, params: {} }
<Link to={match.url} />; // 현재 url 로 이동
<Link to={`${match.url}/about`}>; // 현재 url에 /about을 붙인곳으로 이동

<Route path={match.patch} exact />
<Route path={`${match.patch}/about`} />

// v6 코드
<Link to="" />;
<Link to="about">;

<Route path="" exact />
<Route path="about" />

* 현재 url에 /about을 붙인 곳으로 이동 *단 about앞에 /about을 붙이게되면 진짜 /about으로 이동되니 현재 기준으로 하려면 앞에 슬래쉬를 빼줘야함

 

Route

element

// 기존코드
<Route path="/login" exact component={UsersPage} />

// v6 코드
<Route path="/login" element={<UsersPage />} />

children이나 component가 사라지고, element 사용

exact

exact는 더 이상 사용하지 않고 여러 라우팅을 매칭하고 싶은 URL 뒤에 *을 사용합니다.

<Routes>
    <Route path="/*" element={<Main />} />
</Routes>

 

서브경로 Outlet

// 기존코드
"App.js"
<Route path="/users/:username" component={UsersPage} />

"UserPage.js"
<Route path="/users/:username" component={UserMain} />
<Route path="/users/:username/about" component={About} />

// 기존코드
"App.js"
<Route path="/users/:username/*" element={<UsersPage />}>
  <Route path="" element={<UserMain />} />
  <Route path="about" element={<About />} />
</Route>

"UserPage.js"
<Outlet />

중첩 경로를 사용할 때는 자식이 있는 경로는 해당 경로를 렌더링을 하기 위해

<Outlet>

을 렌더링해야합니다.

이렇게 하면 중첩된 UI로 레이아웃을 쉽게 렌더링 할 수 있습니다.

 

NavLink

• activeStyle, activeClassName이 사라졌습니다.
• <NavLink exact>대신 <NavLink end>로 대체되었습니다.

---

참고 링크

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

 

React Router v6 업데이트 정리

React Router | Upgrading from v5