React Router 업데이트 정리 (v5 -> v6)

Gee·2022년 6월 14일

이번 프로젝트에서 react-router 쓰는데 내가 원래 알던 방식이 아니였다 ! "뭐지?" 하면서 구글링하니 업데이트가 되었다.. 이런ㅎ ㅎ 슬쩍 봤는데 조금 헷갈리는 부분도 있지만 ? 조금 더 직관적이고 간단해진 느낌은 있는거 같다!

본 글은 링크된 영상을 보고 정리한 글입니다. 참고해주세요!

Switch 대신 Routes

Routes는 순서기반이 아닌 가장 일치하는 라우트를 기반으로 선택합니다.
Routes로 기존 Switch의 기능 대체 가능

기존 v5

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>

업데이트 버전 v6

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

useHistory 대신 useNavigate

useNavigate가 기존의 useHistory 의 모든 기능을 대체한다.
useHistory 는 객체였지만 useNavigate는 함수형이다.
(조금 더 직관적으로 변한 느낌이 든다..)

기존 v5

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가 사라짐, 대신에 상대 경로 사용 가능

useRouteMatch를 사용했던 이유가 match.url, match.path를 확인하기 위함이였는데 상대 경로 사용이 가능해지면서 해당기능을 쓰지 않게 됨.

기존 v5

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.path} />
<Route path={`${match.path}/about`} />

업데이트 버전 v6

<Link to="" />; // 만약 /users 였으면, 현재 페이지인 /user로 이동하는 것임.
<Link to="about">; 
// 이렇게 입력시 현재 url에 /users/about을 붙인 곳으로 이동된다. 
//*단 about앞에 /about을 붙이게되면 진짜 /about으로 이동되니 현재 기준으로 하려면 앞에 슬래쉬를 빼줘야함

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

Route에 children이나 component 대신에 element 사용

기존 v5

<Route path="/" component={Home} />
<Route path="/login">
    <Login />
</Route>

업데이트 버전 v6

<Route path="/" element={<Home />} />
<Route path="/login" element = {<Login />}/>

Route는 Routes의 직속 자식이어야 한다.

v5에서는 Switch 안에 Route가 없어도 되었지만, v6 에서는 Route가 Routes의 아래에 있어야 합니다.

기존 v5

// user.js
<Route path="/" component={UserMain} />
<Route path="/about">
    <About />
</Route>

업데이트 버전 v6

<Routes>
 	<Route path="/" element={<UserMain />} />
    <Route path="/about" element={<About />}>
</Routes>

Route에 exact Prop 사라짐. 서브 경로를 위해선 path에 * 사용

예전에 갖고 있던 exact 속성을 v6에서는 적어주지 않고, 기본적으로 가지고 있다고 생각하면 됨.
그래서 exact 가 필요하지 않을 때는 * 를 넣어주는 것이다

여기서 잠깐.. 기존 exact prop을 사용한 이유는 "/users"의 경로를 정확히 매칭하기 위함입니다. exact prop 가 없을 경우, /users 로 시작하는 모든 경로가 매칭되어, 아래의 "users/:username"요 페이지가 매칭되지 않고, "/users" 페이지가 매칭될 것입니다.

기존 v5

// user.js
<Route path="/users/:username" component={UsersPage} />

업데이트 버전 v6

<Route path="/users/:username/*" element={<UsersPage />} />

Optional URL 파라미터 사라지고, 필요하면 Route 2개 만들어야 한다.

( 요건 사용자가 적어서 빠진 것인가 ? 음 )

기존 v5

// user.js
<Route path="/optional/:value?" component={Optional} />

업데이트 버전 v6

<Route path="/optional/:value?" element={<Optional />} />
<Route path="/optional" element={<Optional />} />

서브 라우트를 구현하는 또 다른 방법 Outlet

이번 프로젝트때 사용한 방법인데, 코드가 깔끔해져서 좋았다.

기존 v5
App.js

<Route path="/users/:username" component={UsersPage} />

user.js

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

업데이트 버전 v6
App.js

<Route path="/users/:username/*" element={<UsersPage />}>
  <Route path="" element={<UserMain />} />
  <Route path="about" element={<About />} />
</Route>

user.js

// 기존 코드 없애주고 Outlet만 넣어주면 된다.
<Outlet />

NavLink에 activeStyle, activeClassName 사라짐

NavLink는 현재 페이지가 활성화되어 있으면, 그 페이지에 또 다른 style을 넣어주었다.

기존 v5

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

업데이트 버전 v6

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>