[React] 리액트 라우터 React Router v6 바뀐점 톺아보기

React Router가 v6으로 업데이트 되면서 꽤 많은 부분이 바뀌었다. 공식 문서에선 상세한 마이그레이션 가이드도 제공하고 있다. v6을 사용하려면 React 16.8 버전 이상 사용해야 한다. v6은 이전 버전 대비 번들 사이즈도 70% 이상 줄었다고 한다(패키지 업데이트만으로 번들 크기 최적화가 가능하다는 뜻).

 

Switch → Routes

---

<Switch> 컴포넌트가 <Routes>라는 이름으로 변경됐다. 바뀐 이름이 더 직관적인 것 같다. <Route>만 단독으로 사용할 수도 없게 됐다. <Route>를 사용하려면 항상 <Routes>로 감싸줘야 한다.

// v5
<Switch>
  <Route ... />
</Switch>

// v6
<Routes>
  <Route ... />
</Route>

 

exact 옵션 삭제

v6부터 경로가 정확히 일치하도록 매칭 규칙이 바꼈다. 더이상 exact 옵션을 명시하지 않아도 된다. 모든 라우트는 기본적으로 exact 옵션이 붙는다고 보면 된다. 하위 경로에 다른 라우트를 매칭시키고 싶을 때(서브 경로가 필요할 때) URL 뒤에 * 기호를 붙이면 된다.

// v5 (exact 옵션을 붙이기 않았기 때문에 /profiles/... 하위 경로가 매칭될 수 있다)
<Route path="/profiles" />

// v6
<Route path="/profiles/*" />

 

element 속성

v5에서 Route 컴포넌트를 렌더할 때 component render children 속성을 사용했다. v6 부턴 이 속성들이 모두 없어지고 element로 통일됐다. 더이상 inline function을 이용해 routeProps를 넘길 수도 없다. 대신 Router에서 제공하는 Hooks(useLocation 등)를 통해 라우트 객체에 접근할 수 있다.

// v5
<Route path="profiles" component={Profiles} />
<Route path="profiles" render={(routeProps) => <Profiles {...routeProps} />} />

// v6
<Route path="/profiles/*" element={<Profiles />} />

 

<Route> index 속성

Route에선 index 라는 props를 사용할 수 있다. index는 path=’/’ 와 동일한 의미를 가진다. 즉, 해당 라우트내에서 가장 상위 경로를 가리킨다고 보면 된다. 예를들면...

 

• ‘/’ 경로의 서브 라우트 index는 ‘/’
• ‘/courses’ 경로의 서브 라우트 index는 ‘/courses’
• ...

 

아래 예시에서 /courses 경로에 진입하면 첫번째 서브 라우트의 index는 /courses 경로와 동일하므로 CoursesIndex 컴포넌트를 렌더한다.

 

공식 문서 예제 ▼

function Courses() {
  return (
    <div>
      <h2>Courses</h2>
      <Outlet /> {/* 경로에 따라 CoursesIndex 혹은 Course 컴포넌트 렌더 */}
    </div>
  );
}
// CoursesIndex / Course 컴포넌트 생략

const App = () => {
  return (
    <Routes>
      <Route path="/courses" element={<Courses />}>
        <Route index={true} element={<CoursesIndex />} />
        <Route path="/courses/:id" element={<Course />} />
      </Route>
    </Routes>
  );
};

export default App;

 

useRouteMatch → 상대경로

---

v6부터 상대경로를 사용할 수 있다. .은 현재 경로(라우트) .. 상위 경로를 가리킨다. 온점 .이 아닌 슬래시 /를 이용해서 입력하면(/profiles) 절대경로로 해석하는 점 주의

// v5 (절대경로만 가능)
<Link to="/profiles/smith">smith</Link>

// v6 (상대경로 및 절대경로 모두 가능)
// 현재 경로가 /profiles라고 가정
<Link to="smith">smith</Link> // "/profiles/smith"
<Link to="./smith">smith</Link> // "/profiles/smith"
<Link to=".">smith</Link> // "/profiles"
<Link to="..">smith</Link> // "/"
<Link to="../smith">smith</Link> // "/smith"

 

match 객체에 접근할 수 있는 useRouteMatch Hook도 v6에서 사라졌다. 대신 상대경로를 쓰면 된다.

// 현재 경로가 /home 이라고 가정
// v5 
const match = useRouteMatch(); // {path: '/home', url: '/home', isExact: true, params: {…}}
<Link to={match.url} /> // 현재 url('/home')로 이동하는 링크
<Route exact path={`${match.path}/about`} /> // '/home/about'에 대한 라우트

// v6
<Link to="."/> // '/home'
<Route path="about"/> // '/home/about'

 

혹은 useRouteMatch와 유사한 useMatch를 사용할 수도 있다. 현재 경로와 useMatch 파라미터로 넘긴 경로가 일치한다면 관련 데이터를 반환하고, 일치하지 않는다면 null을 반환한다.

// 현재 경로가 "/profiles" 라고 가정
const match = useMatch('/profiles')
console.log(match) // {params: {…}, pathname: '/profiles', pathnameBase: '/profiles', pattern: {…}}

 

중첩 라우트 (서브 라우트)

---

import React from 'react';
import { Route, Link, Routes } from 'react-router-dom';
import About from './components/About';
import Home from './components/Home';
import Profiles from './components/Profiles';
import Profile from './components/Profile';
import './App.css';

const App = function () {
  return (
    <div className="container">
      <h2>링크 목록</h2>
      <ul>
        <li>
          <Link to="/">홈으로 이동</Link>
        </li>
        <li>
          <Link to="/about">소개로 이동</Link>
        </li>
        <li>
          <Link to="/profiles">프로필 목록</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />

        {/* 방법 1 : 부모 라우트 경로에 "/profiles/*" 입력시(하위 Route 순서에 주의) */}
        <Route path="/profiles/*" element={<Profiles />}>
          <Route path=":username" element={<Profile />} />
          <Route path="*" element={<div>유저를 선택해주세요 </div>} />
        </Route>

        {/* 방법 2 : 부모 라우트 경로에 "/profiles" 입력시(추천) */}
        <Route path="/profiles" element={<Profiles />}>
          <Route index={true} element={<div>유저를 선택해주세요 </div>} />
          <Route path=":username" element={<Profile />} />
        </Route>
      </Routes>
    </div>
  );
};

export default App;

/profiles 라우팅 화면

 

서브 라우트(중첩 라우트)는 아래처럼 라우트(/profiles) 내부에 라우트(/profiles/:username)를 또 만드는 것을 의미한다.

 

• /profiles 경로 라우트 : <div>유저를 선택해주세요</div> 엘리먼트 렌더
• (/profiles 경로에서)유저 선택 후 /profiles/:username 경로로 라우트
  • 기존 <div>...</div> 엘리먼트는 마운트 해제되고
  • <Profile> 컴포넌트 렌더

 

React Router v5에선 exact 속성을 활용해 서브 라우트를 구현했다. 아래는 v5 코드 ▼

// App.js
<Route path="/profiles" component={Profiles} />

// Profiles.js
<Route path="/profiles" exact render={() => <div>유저를 선택해주세요 </div>} />
<Route path="/profiles/:username" component={Profile} />

 

방법 1

v6에선 exact 속성이 기본적으로 적용되어 있으므로 *를 이용해 서브 라우트를 구현할 수 있다. v6부터 상대경로를 지원하므로 /profiles/:username 코드는 :username만 입력하면 된다.

 

v6 코드 - 방법 1 ▼

// App.js
<Routes>
  <Route path="/profiles/*" element={<Profiles />} />
</Routes>

// Profiles.js
// 현재 경로(/profiles)에서 매칭하는 서브 경로가 없을때를 매칭하고 싶을 땐,
// path="*" 혹은 path="" 형태로 입력하면 된다.
<Routes>
  <Route path="*" element={<div>유저를 선택해주세요 </div>} /> {/* "/profiles" */}
  <Route path=":username" element={<Profile />} /> {/* "/profiles/:username" */}
</Routes>

 

방법 2-1 — Outlet 활용

💡 Outlet은 중첩 라우트, 공통적으로 보여야할 레이아웃이 있을 때도 유용하다

 

React Router v6에 새롭게 추가된 <Outlet>을 사용할 수도 있다. 1개 파일(예시에선 App.js)에 모든 경로를 지정하고, 중첩 라우트(서브 라우트) 되는 곳에 <Outlet /> 코드만 추가하면 된다. 한 곳에서 중첩 라우트를 관리할 수 있어 더 편하다. (하위 Route 순서 주의. :username 경로에 대한 라우트가 위에 와야함)

 

v6 코드 - 방법 2 (Outlet 활용) ▼

// App.js
import { Routes, Route, Outlet } from 'react-router-dom';

<Routes>
  <Route path="/profiles/*" element={<Profiles />}>
    <Route path=":username" element={<Profile />} />{' '}
    {/* "/profiles/:username" */}
    <Route path="*" element={<div>유저를 선택해주세요</div>} />{' '}
    {/* "/profiles/*" */}
  </Route>
</Routes>;

// Profiles.js
<Outlet />
/*
    아래 2개중 1개가 라우트됨
    "/profiles" 혹은 "/profiles/*" 경로 → <div>유저를 선택해주세요</div>
    "/profiles/:username" 경로 → <Profile>
*/

 

방법 2-2 — Outlet + Route Index 활용 (추천)

Outlet을 활용해 서브 라우트를 구현하는 상황에서, /profiles/:username 아래 더이상 하위 경로가 없다면 부모 라우트 경로에 굳이 *(asterisk)를 붙인 /profiles/* 형태로 작성하지 않아도 된다.

 

부모 라우트엔 * 기호 없이 /profiles 경로만 입력하고, 상위 라우트(/profiles)와 일치하지만 그 이후 경로가 주어지지 않은 상황에 매칭될 서브 라우트에 index props를 넘기는 방식으로 작성할 수도 있다.

 

`Route`의 `index` 속성은 해당 라우트의 가장 상위 경로를 가리킨다. 이 예제에선 `/profiles` 경로와 같다.

// App.js
<Routes>
  <Route path="/profiles" element={<Profiles />}>
    <Route index element={<div>유저를 선택해주세요</div>} /> {/* "/profiles" */}
    <Route path=":username" element={<Profile />} />{' '}
    {/* "/profiles/:username" */}
  </Route>
</Routes>;

 

• /profiles 경로 렌더 컴포넌트 : 방법 2-1 / 방법 2-2 모두 <div>유저를 선택해주세요 </div>
• /profiles/:username 경로 렌더 컴포넌트 : 방법 2-1 / 방법 2-2 모두 <Profile />
• /profiles/:username/123 경로 렌더 컴포넌트
  • 방법 2-1 : <div>유저를 선택해주세요 </div>
  • 방법 2-2 : 매칭하는 라우트가 없으므로 아무것도 렌더하지 않음. 이땐 path=”:username”에 대한 하위 라우트(/profiles/:username/123)를 지정해주면 된다.

 

useHistory → useNavigate

---

v6부터 useHistory 이름이 useNavigate로 변경됐다. v5의 useHistory를 실행하면 객체를 반환하고, 이 객체에 push replace 같은 메서드가 포함돼있다. 반면 v6의 useNavigate를 실행하면 함수 자체를 반환한다. 때문에 navigate는 함수 호출처럼 써야한다. navigate에도 상대경로를 쓸 수 있다.

// 현재 경로가 'profiles'라고 가정
// v5
const history = useHistory();
history.push('/profiles/smith');
history.replace('/profiles/smith');
history.go(1); // 1페이지 forward
history.go(-2); // 2페이지 back

// v6
const navigate = useNavigate();
navigate('smith'); // (상대경로)"profiles/smith"
navigate('/profiles/smith', { replace: true }); // 절대경로
navigate(1);
navigate(-2);

 

push, replace 차이점 비교

💡 React Router의 를 통해 이동할 때마다 history stack 쌓인다. replace는 로그인을 마치고 이동한 다음 페이지에서 뒤로가기 버튼을 눌렀을 때 다시 로그인 화면이 보이지 않도록할 때 유용하다.

 

replace를 사용하면 history stack에 쌓여 있는 가장 마지막 요소('/profiles')를 이동할 경로('/profiles/smith')로 대체한다. 이동 후 이전 경로를 남기지 않을 때 replace를 사용하면 된다.

 

• push 이용시
  • 이동 : '/' → '/profiles' → '/profiles/smith'
  • 마지막 페이지에서 뒤로가기 후 : 'profiles'
  • history stack: ['/', 'profiles', 'profiles/smith']
• replace 이용시
  • 이동 : '/' (push) → '/profiles' (replace) → '/profiles/smith'
  • 마지막 페이지에서 뒤로가기 후 : '/'
  • history stack: ['/', 'profiles/smith']

 

state 넘기기

navigate 두번째 파라미터(객체)를 통해 원하는 state를 넘길 수도 있다.

// Profiles.js
// v5
history.push({ pathname: '/profiles/smith', state: { name: 'smith' } });
// v6
navigate('smith', { state: { name: 'smith' } });

// Profile.js
import { useLocation } from 'react-router-dom';
const Profile = function () {
  const { state } = useLocation();
  console.log(state); // {name: 'smith'}
};

 

Redirect → Navigate

---

💡 Navigate는 useNavigate 함수의 컴포넌트 버전

 

v6부터 <Redirect> 컴포넌트가 없어지고 <Navigate>로 대체됐다. 기존 <Redirect>는 replace 로직으로 작동했지만, <Navigate>는 push 로직으로 작동한다. <Navigate>에 replace 로직을 적용하려면 아래처럼 replace={true} props를 넘기면 된다.

// v5
<Redirect to="about " /> // replace 로직으로 작동
<Redirect to="home" push /> // push 로직으로 작동

// v6
<Navigate to="about" repalce /> // replace 로직으로 작동
<Navigate to="home" /> // push 로직으로 작동

 

Navigate는 useNavigate를 컴포넌트 형태로 감싼 버전이다. 따라서 이 둘 모두 to replace state props를 받을 수 있다. return() 문 안에서 컴포넌트로 작성할 때 Navigate를 사용하면 된다. 아래같은 상황에선 둘 중 아무거나 써도 무방하다.

import { Navigate, useParams } from 'react-router-dom';

const Profile = function () {
  const { username } = useParams();
  const profile = profileData[username];

  if (!profile) {
    return <Navigate to="profiles" />;
    // useNavigate()('/profiles')
  }
};

 

useRoutes를 이용해 객체 형태로 라우트를 구성할 때도 Navigate가 유용하게 쓰인다. 아래처럼 조건에 따라 리디렉션 시킬 때 Navigate 컴포넌트를 사용하면 된다.

 

코드 참고 StackOverFlow ▼

// routes.js
import { Navigate } from 'react-router-dom';

const routes = (isLoggedIn) => [
  {
    path: '/app',
    element: isLoggedIn ? <DashboardLayout /> : <Navigate to="/login" />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/account', element: <Account /> },
      { path: '/', element: <Navigate to="/app/dashboard" /> },
      // ...
    ],
  },
];
export default routes;

// App.js
import routes from './routes';
import { useRoutes } from 'react-router-dom';

function App() {
  const { isLoggedIn } = useSelector((state) => state.auth);
  const routing = useRoutes(routes(isLoggedIn));

  return <>{routing}</>;
}

 

Optional URL

---

파라미터를 선택적으로 받는 상황에서 ? 물음표를 활용한 Optional URL도 없어졌다. 파라미터가 있거나 혹은 없을 때 모두 특정 컴포넌트를 렌더 할 때 사용한다. v6에선 필요한 만큼 Route를 정의해주면 된다.

 

아래 코드에서 username 파라미터가 없을 때(/profiles) 혹은 있을 때(/profiles/smith) 모두 Profiles 컴포넌트를 렌더한다.

// v5
<Route path="/profiles/:username?" component={Profiles} />

// v6
<Route path="/profiles/:username" element={<Profiles />} />
<Route path="/profiles/" element={<Profiles />} />

 

NavLink

---

NavLink는 Link와 동일하게 작동하지만 활성화(to="..."에 명시한 경로와 현재 경로가 일치할 때) 여부에 따라 특정 스타일이나 클래스 이름을 지정할 수 있다. v5 대비 변경사항은 아래와 같다.

 

• <NavLink exact> → <NavLink end> 이름 변경
• activeClassName activeStyle props 제거. 대신 style과 className에 인라인 함수 전달 가능

 

active 객체

style과 className 속성 인라인 함수의 첫번째 파라미터에 활성화 여부를 나타내는 객체가 전달된다. 현재 경로가 to에 명시한 경로와 일치하면 {isActive: true}, 일치하지 않으면 {isActive: false}로 나온다

<NavLink to="smith" style={(active) => console.log(active)}>
  링크
</NavLink>;
// console.log -> 경로가 일치하면 {isActive: true} 일치하지 않으면 {isActive: false}

 

className

className 조건을 따로 지정하지 않았다면, 경로가 일치할 때(활성화 상태) active 라는 이름의 클래스가 자동으로 추가된다. 일치하지 않을 땐 빈 문자열""로 나온다.

 

HTML 엘리먼트 ▼

// 경로가 일치할 때 NavLink 엘리먼트
<a href="/profiles/smith" class="active" aria-current="page">링크</a>

// 경로가 일치하지 않을 때 NavLink 엘리먼트
<a href="/profiles/smith" class="">링크</a>

 

NavLink 예시 코드

활성화 상태면(to="..."에 명시한 경로와 현재 경로가 일치할 때) red 스타일 링크와 'activated' 라는 클래스 이름을 갖고, 활성화 상태가 아니면 'deactivated' 라는 클래스 이름을 갖는 예시.

<NavLink
  to="smith"
  style={({ isActive }) => (isActive ? { color: 'red' } : null)}
  className={({ isActive }) => (isActive ? 'activated' : 'deactivated')}
>
  Smith(NavLink)
</NavLink>;

 

end 속성

하위 경로가 일치하더라도 해당 컴포넌트는 활성화 상태로 매칭되지 않도록 할 때 end 속성을 사용할 수 있다. 아래 예시에선 웹사이트 루트('/')에서만 활성화되고 다른 URL은 활성화되지 않는다. v6 부터 기본적으로 exact 옵션이 적용되므로 end 속성은 딱히 사용할 일이 없지 않을까 생각한다.

<NavLink to="/" end>
  Home
</NavLink>

 

useRoutes

---

v5에서 객체를 이용해 계층 구조로 라우트를 구성할 때 react-router-config라는 패키지를 설치해야 했다. v6부턴 React Router에서 제공하는 useRoutes Hook을 이용하면 된다.

 

useRoutes Hook은 기능적으로 <Routes>와 동일하지만, JSX를 쓰지 않고 JS 객체 형태로 <Routes> 엘리먼트를 정의할 수 있다. 즉 useRoutes([{...}]) 파라미터에 넘기는 {...} 객체는 <Route> 엘리먼트와 동일하다고 보면 된다.

 

useRoutes는 매칭하는 라우트가 있으면 React 엘리먼트를 반환하고, 없다면 null을 반환한다. <Routes>와 useRoutes는 동일하므로 선호하는 것을 사용하면 된다. 아래 두 코드는 완전히 동일하게 작동한다.

import { useRoutes } from 'react-router-dom';

const App = function () {
  const elements = useRoutes([
    // Route에서 사용하는 props와 동일
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> },
    {
      path: '/profiles',
      element: <Profiles />,
      children: [
        // 중첩 라우트(서브 라우트)는 children 프로퍼티 사용
        { index: true, element: <div>유저를 선택해주세요</div> },
        { path: ':username', element: <Profile /> },
      ],
    },
  ]);

  return (
    <div>
      <ul>{/* 생략 */}</ul>
      {elements}
    </div>
  );
};

import { Routes, Route } from 'react-router-dom';

const App = function () {
  return (
    <div>
      <ul>{/* 생략 */}</ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profiles" element={<Profiles />}>
          <Route index element={<div>유저를 선택해주세요 </div>} />
          <Route path=":username" element={<Profile />} />
        </Route>
      </Routes>
    </div>
  );
};

 

참고로 NotFound 페이지를 구현할 땐 아래처럼 '*' 경로를 갖는 객체(라우트)를 하나 더 추가하면 된다

const element = useRoutes([
  { path: '/', element: <Home /> },
  // 생략...
  { path: '*', element: <NotFound /> },
]);

 

공식 문서 예제 코드

---

• React-router Route Objects Example - StackBlitz
• React-router Auth Example - StackBlitz
• React-router Modal Example - StackBlitz

 

레퍼런스

---

• React Router
• react-router v6에서는 어떤것들이 변했을까??
• React Router v6 튜토리얼  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요