React Router v6 업데이트 정리

react-router

velopert님의 영상을 토대로 정리한 블로그 글입니다.
동영상으로 보실분들은 velopert님의 유튜브 영상을 시청해주세요!

 

React Router v6 정식 릴리즈

React Router v6가 정식으로 릴리즈 되었다. 공식문서
그 동안 사용했던 React Router의 문법이 조금 바뀌었는데
v5문법에 많이 익숙해서 그런지 v6문법과 v5문법이 많이 헷갈린다. ㅎㅎ..
그럼 어떤점이 바뀌었는지 한번 보자

 

Switch가 사라지고, Routes 등장

• Routes는 기존 Switch처럼 경로의 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다.
• Routes로 기존 Switch의 기능을 대체 가능

기존 코드

<Switch>
  <Route path="/" ..... />
</Switch>

 

v6 코드

<Routes>
  <Route path="/" .....  />
</Routes>

useHistory가 사라지고, useNavigate 등장

• useNavigate로 기존에 useHistory의 기능을 전부 대체 가능
• useHistory의 history는 객체였지만 useNavigate의 navigate는 함수다.

기존 코드

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를 쓸 필요가 없어짐.

기존 코드

function App() {
  const match = useRouteMatch();
  console.log(match); // { path: '/', url: '/', isExact: true, params: {} }

  return (
      <>
        <Link to={match.url}>현재url이동</Link>;
        <Link to={`${match.url}/about`}>현재url/about이동</Link>
        
        <Route path={match.patch} exact />
        <Route path={`${match.patch}/about`} />	
      </>
  )
}

export default App

 

v6 코드

function App() {
  return (
      <>
        <Link to="">현재url이동</Link>;
        <Link to="about">현재url/about이동</Link>
        
        <Route path="" />
        <Route path="about" />	
      </>
  )
}

export default App

Route에 children이나 component가 사라지고, 대신에 element 사용

기존 코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

 

v6 코드

<Route path="/" exact element={<HomePage />} />
<Route path="/login" exact element={<LoginPage />} />

기존 Route는 꼭 Switch 안에 없어도 됐지만, v6의 Route는 Routes의 직속 자식이어야 함

기존 코드

<Route path="/" exact component={HomePage} />
<Route path="/login" exact>
    <LoginPage />
</Route>

 

v6 코드

<Routes>
  <Route path="/" exact element={<HomePage />} />
  <Route path="/login" exact element={<LoginPage />} />
</Routes>

Route에 exact Prop 사라짐(exact가 기본으로 되어있음)

기존 코드

<Route path="/login" exact component={UsersPage} />

 

v6 코드

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

서브 경로가 필요한 경우 path에 * 사용

기존 코드

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

 

v6 코드

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

Optional URL 파라미터 사라짐. 필요하면 Route 2개 만들어야 함

기존 코드

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

 

v6 코드

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

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

기존 코드

App.js

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

UserPage.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>

UserPage.js

<Outlet />

NavLink에 activeStyle, activeClassName 사라짐

기존 코드

<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>