[React] react-router-dom v6 업데이트

이전에 강의를 들을 땐 v5를 기준으로 진행했었는데

 react-router-dom version이 업데이트됨으로써 변경되는 사항을 숙지할 필요가 생겼다.

 

기존의 react-router-dom이 ver 5라면

 

npm i react-router-dom@6

 

 

위와 같이 기존의 버전을 업데이트 할 수 있다.
기존의 버전변경이 아닌 아닌 새롭게 설치 시에 자동으로 최신버전으로
적용된다는 점을 알아두자.

 

React Router v6은 react hooks를 많이 사용하기 때문에 
ver6으로 업그레이드 하기 전에 react16.8이상을 사용해야 한다.
react router v5는 React 15와 호환된다.

 

switch대신 Routes 도입

<Routes> 안의 모든 <Route>와 <Link>는 상대적으로 변경되었다.

<Route path> 및 <Link to>가 이전 보다 간결하고 표현이 가능하다.

 

 

<Switch> 요소를 <Routes>로 변환하는법.

 

[App.js]

// v5

<BrowserRouter>
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
  </Switch>
</BrowserRouter>

 

// v6

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="users/*" element={<Users />} />
  </Routes>
</BrowserRouter>

중첩된 url의 경로를 사용하기 위해 switch와 exact 를 사용하던 v5버전과 달리
<Routes>의 내부에 배치함으로써 exact 가 삭제되었으며

라우트를 여러개 매칭시키고 싶다면 url뒤에 *를 사용한다.

기존의 component부분은 element로 변경되었다.

[User.js]

// v5

//..생략
  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );

 

//..v6

 return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

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

중첩된 경로와 링크 설정 시 Link to 안의 경로에 match.path와 match.url을
사용하던 부분이 간결하게 변경되었다.
내부의 경로가 path="users/:id"에서 path="id"로 상대 경로로 변경

 

자동으로 상위 경로의 경로와 URL을 기반으로 하므로

match.url 또는 match.path를 수동으로 하지 않아도 된다.

<Switch>에서 경로의 순서를 잘못 위치 하였을 경우의 버그를 방지.

 

v5 앱에서의 모든 <Route children>이 v6에서 <Route 요소>로 변경되었다.

 

 

중첩된 Route의 사용 Outlet

위의 코드처럼 직접 경로 설정 외에

App.js에서 Route안에 자식태그로 중첩하는 라우터를 넣고
Outlet 라이브러리를 통해 불러올 수 있다.

// App.js
<Route path="users/*" element={<Users />}>
  <Route path=":id" element={<UserProfile />} />
</Route>

//User.js

import { Link, Routes, Route, Outlet } from "react-router-dom";

//..생략

  return (
    <div>
      <Link to="me">My Profile</Link>

      <Outlet />
    </div>
  );

 

react-router-config 대신 UseRoutes사용이 가능하거나

useHistory 대신 useNavigate사용하는 등 

추가적인 사항들은 공식 문서에서 알 수 있다.

 

https://reactrouter.com/docs/en/v6/upgrading/v5