React Router v5とv6：違いを比較してみた

React RouterはReactアプリケーションのためのデクララティブなルーティングライブラリであり、シングルページアプリケーション (SPA) の構築を容易にします。
本記事では、React Router v5とv6の主な違いと、その詳細な解説、および実際のコード例を示しながら、v5からv6への移行方法を説明します。

React Router v5とv6の違い

以下に、React Router v5とv6の主な違いをまとめます。

• Routeの指定方法
• Switchの廃止
• Outletの導入
• relative pathの利用
• useRouteMatchの廃止

Routeの指定方法

React Router v5では、Routeコンポーネントのcomponent属性に指定していましたが、v6ではelement属性にReact要素を指定します。

v5の例:

<Route path="/about" component={About} />

v6の例:

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

この変更により、コンポーネントのインスタンスを直接渡すことができ、より直感的でわかりやすいコードになります。

Switchの廃止

React Router v6では、Switchコンポーネントが廃止され、Routesコンポーネントを使います。RoutesはSwitchと同様に、最初にマッチしたRouteコンポーネントのみをレンダリングします。

v5の例:

<Switch>
  <Route exact path="/" component={Home} /><Route path="/about" component={About} />
</Switch>

v6の例:

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

Routesの方が直感的な命名だと個人的には思います。

Outletの導入

v6ではネストされたルーティングを実現するために、Outletコンポーネントが導入されます。Outletは、ネストされたルートのコンポーネントをレンダリングする場所を指定します。

v5の例:

<Route path="/user">
  <UserProfile>
    <Route path="/user/posts" component={Posts} />
    <Route path="/user/comments" component={Comments} />
  </UserProfile>
</Route>

v6の例:

function UserProfile() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

v6では、UserProfileコンポーネントにOutletを配置して、ネストされたルートのコンポーネントが表示される場所を設定します。これにより、親コンポーネント内で子ルートの表示位置を制御できるようになります。

relative pathの利用

React Router v6では、LinkやRouteコンポーネントで相対パスを利用できるようになります。これにより、アプリケーションの構造を変更する際にルーティングの修正が容易になります。

v5の例:

<Route path="/user/posts" component={Posts} />
<Link to="/user/posts">Posts</Link>`

v6の例:

<Route path="posts" element={<Posts />} />
<Link to="posts">Posts</Link>

v6では、親ルートとの相対パスを使ってルーティングを定義できます。これにより、ルーティング定義がシンプルになり、アプリケーションの構造変更にも柔軟に対応できます。

useRouteMatchの廃止

React Router v6では、useRouteMatchが廃止され、代わりにuseMatchが導入されます。useMatchは、与えられたパスが現在のURLとマッチするかどうかをチェックし、マッチした場合はそのマッチオブジェクトを返します。

v5の例:

function NavLink({ to, children }) {
  const match = useRouteMatch({ path: to, exact: true });
  return <Link to={to}>{match ? <strong>{children}</strong> : children}</Link>;
}

v6の例:

function NavLink({ to, children }) {
  const match = useMatch(to);
  return <Link to={to}>{match ? <strong>{children}</strong> : children}</Link>;
}

useMatchは、useRouteMatchと同様に、現在のURLと指定したパスがマッチするかどうかを判断するために使用されますが、よりシンプルなAPIで提供されています。useMatchは、与えられたパスが現在のURLとマッチするかどうかをチェックし、マッチした場合はそのマッチオブジェクトを返します。これにより、例えばナビゲーションリンクで現在のページを強調表示するなどの実装が容易になります。

まとめ

本記事では、React Router v5とv6の主な違いを実際のコード例を示しながら、v5からv6への移行方法を説明しました。v6には、コードの簡潔さ、柔軟性の向上、ネストされたルーティングの改善などがあり、より快適になったのではないかと思います。