React Router v7 とは？基礎から活用方法までやさしく解説

フロントエンド開発•2025/1/24

はじめに

Reactでアプリケーションを作るとき、クライアントサイドのページ遷移を実装する手段として多くの人が利用するのがReact Router v7です。アプリをページ単位で分割し、それぞれのページにルートを割り当てると、ユーザーはURLを変更するだけでコンテンツを切り替えられるようになります。

初めてルーティングを学ぶ方は、「そもそもルータとは何をしているのか」が分かりにくいかもしれません。しかしReact Routerを使えば、複雑な画面遷移やURL管理をわかりやすい構造で整理できます。それではここから、React Router v7がどういったものかを掘り下げながら、実務でどう活用できるのかを見ていきましょう。

React Router v7 とは

React Router v7は、Reactアプリのルーティング機能を手軽に実装できるライブラリです。 1つの画面を多数のコンポーネントで作り込むだけでは、ユーザーから見ると「どこからどのページへ移動すればよいか」がわかりにくくなります。そこでルーティングを導入すると、URLごとに対応したコンポーネントを表示する仕組みを整えられます。

マルチページのような振る舞いを Single Page Application (SPA)で実現するため、ページ全体のリロードを必要とせずに画面が切り替わるのが特徴です。これにより、ページ遷移時のストレスを抑え、スムーズな操作感を提供できます。公式のReactと深く連携していることもあり、React Router v7はReactアプリのルーティングの定番ツールとなっています。

React Router v7 の特徴

React Router v7には、シンプルなAPI設計と柔軟なルーティング機能が用意されています。ここでは、その特徴をいくつか挙げてみましょう。

ルート管理が直感的に書ける
ネストされた画面構造を簡単に定義できる
URLパラメータを使った動的な遷移が可能
エラー時などの表示切り替えが柔軟
ページ遷移に合わせて状態管理やデータ取得を組み込みやすい

これらは、実務レベルのアプリにおいて使いやすさと保守性を両立するために重要といえます。次のセクションでは、具体的な記述方法や画面構成例を見ながら、基本的な使い方を確認してみましょう。

基本的な使い方

React Router v7を導入する場合、まずはreact-router-domをインストールした上で、アプリのエントリーポイントでルーターコンポーネントを設定します。このとき、複数の画面を分かりやすくまとめるために、ルートの設定やネスト構造を整理していきます。

ルーターのセットアップ

ここでは、単純な例としてトップページとユーザー一覧ページ、ユーザー詳細ページをルーティングで切り替えるコードを見てみましょう。


import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import App from "./App";
import Users from "./Users";
import UserDetail from "./UserDetail";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/users",
    element: <Users />,
  },
  {
    path: "/users/:id",
    element: <UserDetail />,
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RouterProvider router={router} />
);

createBrowserRouter でルート配列を定義し、必要なコンポーネントを紐づけます。トップページにはAppコンポーネント、ユーザー一覧にはUsers、ユーザー詳細にはUserDetailを表示するように設定されています。

Nested Routes でコンポーネントをまとめる

より複雑なアプリでは、ページ内の一部だけを別のコンポーネントに切り替えたい場合があります。このとき、Nested Routesを使うとURL構造とコンポーネントの階層が対応しやすくなります。

例えば、ユーザー関連の機能をまとめるときに、/users配下のURLで画面を切り替える場合は次のように定義します。


import {
  createBrowserRouter,
  RouterProvider,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import App from "./App";
import Users from "./Users";
import UserDetail from "./UserDetail";
import UserSettings from "./UserSettings";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="users" element={<Users />}>
        <Route path=":id" element={<UserDetail />} />
        <Route path="settings" element={<UserSettings />} />
      </Route>
    </Route>
  )
);

function Root() {
  return (
    <RouterProvider router={router} />
  );
}

export default Root;

<Route>同士を入れ子にすると、/users の下にある:idやsettingsがネストされた形で設定されます。これにより、URLとコンポーネント階層を直感的に紐づけられるのが便利です。

URLパラメータで柔軟な画面遷移

URLパラメータは、ユーザーIDや商品IDなどの動的な部分をURLに含めるときに使われます。たとえば:idと書いておけば、実際にアクセスするときは /users/1 のようにIDを渡して詳細画面を呼び出せます。

UserDetailコンポーネント側でルータのフックを利用してIDを取得し、適切なデータを表示する流れが一般的です。これにより、URLが変わると表示する情報も切り替わるため、ユーザーにとってはわかりやすい構成になります。

Protected Routes と認証

会員制サイトや管理画面など、ログインが必要なページを保護したい場合があります。 React Router v7ではルートごとに認証状態をチェックし、未ログインならログインページへリダイレクトするといった実装が簡単です。このような仕組みをProtected Routesと呼ぶことがあります。

一般的には、AuthContextやReduxなどの状態管理でログイン情報を保持し、ルート定義時にチェックを行う実装が使われます。たとえば、認証されていない状態ではアクセスを制限するガードコンポーネントを挟む方法などが考えられます。

実務での活用シーン

React Router v7は、小規模な個人サイトから大規模な業務システムまで幅広く利用できます。特に、複雑な画面遷移やユーザーごとに異なるページが必要な場合は、URLパラメータやNested Routesが大いに役立ちます。

いくつかのシーンを挙げてみます。

ユーザー情報管理画面でIDごとの詳細表示を行う
管理者と一般ユーザーで異なるページを表示する
商品一覧ページと商品詳細ページを分けて見やすくする
ブログ記事一覧と記事詳細の構造を整える

こうした場面で、React Router v7ならシンプルなAPIで柔軟なルーティングが組めるため、開発や保守がスムーズになります。

ルーティング構成が複雑になるとメンテナンス性が下がりやすいです。ルート設計の段階で画面の機能や階層を整理しておくと、あとから手を加えやすくなります。

API連携の具体例

実務では、ルーティングと同時に外部APIなどから取得したデータを表示するケースが多いでしょう。ここでは、ユーザー情報を取得して表示するシンプルな例を見てみます。

REST APIからデータを取得する流れ

ルーター設定でユーザー詳細ページのパスに :id を設定する
UserDetailコンポーネントでURLパラメータからIDを取得する
取得したIDをもとにAPIを呼び出す
受け取ったデータを画面に表示する

このように、React Router v7でパラメータ付きのURLを定義しておくと、ページ遷移時にIDの切り替えを自然に実現できます。

コード例: ユーザー詳細画面


import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function UserDetail() {
  const { id } = useParams();
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // IDを使ってAPIをコールしてみる例
    fetch(`https://example.com/api/users/${id}`)
      .then((res) => res.json())
      .then((data) => {
        setUserData(data);
      })
      .catch((error) => {
        console.error("データ取得時にエラーが発生しました。", error);
      });
  }, [id]);

  if (!userData) {
    return <div>データを読み込み中です...</div>;
  }

  return (
    <div>
      <h3>ユーザー詳細</h3>
      <p>ユーザーID: {userData.id}</p>
      <p>名前: {userData.name}</p>
      <p>メール: {userData.email}</p>
    </div>
  );
}

export default UserDetail;

このように、useParams()フックでURLパラメータを取得し、実行時に必要なデータを取得できます。もしデータ取得に時間がかかる場合はローディング表示を組み込んだり、エラー時には別の表示を行ったりする工夫が必要です。

React Router v7 のメリットと注意点

React Router v7はSPA開発を効率化してくれる一方、いくつか考慮すべき点があります。ここで、メリットと注意点を簡単に整理してみましょう。

メリット

URLベースの画面分割がしやすい
ネストや動的ルーティングで構造をわかりやすく表現できる
学習コストが比較的低く、Reactの知識を活かしやすい
サードパーティライブラリとの組み合わせ事例が多い

注意点

クライアントサイドレンダリングのため、初回ロードでJSが重いと表示に遅延が発生する
ルーティング構成が増えるほど管理が煩雑になる
状態管理ライブラリとの連携やデータ取得のフローを慎重に検討しないと、画面遷移が複雑化しやすい
ページタイトルやメタタグの設定には、別途工夫が必要

大規模アプリでより快適なパフォーマンスを得るには、必要に応じてSSR（Server-Side Rendering）や分割エントリーポイントなどの仕組みを取り入れる場合もあります。

React Router v7を使うときは、画面をどのように分割して、どのURLにどのコンポーネントを割り当てるのかを最初にイメージすることが重要です。

まとめ

ここまで、React Router v7を使ったルーティングの基本と実務での活用イメージを紹介してきました。初心者の皆さんは、まずは小さなアプリからルーティングを体験してみると理解が進みやすいでしょう。

React Router v7のメリットは、複雑な画面遷移でもシンプルなAPIで管理できる点にあります。ネストされたページやURLパラメータを活用すると、URL構造とコンポーネントの対応関係をはっきりさせられます。これによって、チーム開発でも画面の担当が分けやすくなり、保守性が上がるでしょう。

ただし、あらゆる場面で同じルーティング構成が最適とは限りません。プロジェクトの規模や要件に合わせて、パスのネーミングや画面の分割方法を柔軟に検討するのがおすすめです。

みなさんも、React Router v7の機能を自分のアプリに取り入れて、読みやすいURL設計や直感的な画面遷移を実現してみてはいかがでしょうか。