【React.js/Next.js】React Router v7 データモード 完全入門

React.js / Next.js

React Router って、どんな機能があるのかな？

今回は、React.js のアプリにルーティング機能を追加するためのライブラリ React Router について解説します。
URLと画面をどのように結びつけるのか、その基本的な仕組みから、v7 で主流となっているデータモード の実践的な使い方まで、コード例を交えながらわかりやすく紹介します。

React.js の環境構築がまだの場合は、下記より環境構築を行なってください。

【React.js/Next.js】Viteを使用したReact.jsの環境構築
今回は、Web アプリの画面を効率よく作るための JavaScript ライブラリ React.js の環境構築について紹介します。React.jsとはReact.js とは、Meta社（旧 Facebook）が開発した、Web アプリケー...
study-study.tachu-tachu.com
2026.01.20

React Router とは？

React Router とは、React.js アプリに URLと画面を結びつけるルーティング機能を追加するライブラリ です。
v7 では単なるルーティングにとどまらず、データ取得やフォーム処理 も統合した アプリケーションの基盤 として進化しました。

特に推奨されている データモード では、画面表示前にデータを取得 したり、ローディング状態を自動管理 することができます。
また、SSR（サーバーサイドレンダリング：サーバー側でページを作って表示を高速化する仕組み）にも対応しており、TypeScript と組み合わせることで 型安全性も高く なっています。

React Router のインストールと基本的な使い方

それでは、ここから実際に React Router を インストール したり、コンポーネントで利用する 基本的な流れを見ていきましょう。

React Router のインストール

React Router を インストール します
※ v7では基本的に react-router-dom は不要です。

npm install react-router

React Router の基本的な使い方

  1. createBrowserRouter で ルーターの設定
  2. RouterProvider で 設定したルーターをReactで有効化
import { createBrowserRouter, Link } from 'react-router';
import { RouterProvider } from 'react-router/dom';

// ホーム画面
export function Home() {
  return (
    <>
      <h2>Home</h2>
      <Link to="/child">Children</Link>
    </>
  );
}

// 子コンポーネント画面
export function Child() {
  return (
    <>
      <h2>Child</h2>
      <Link to="/child/grandchild">GrandChild</Link>
      <br />
      <Link to="/">Homeに戻る</Link>
    </>
  );
}

// 孫コンポーネント画面
export function GrandChild() {
  return (
    <>
      <h2>GrandChild</h2>
      <Link to="/child">Childに戻る</Link>
    </>
  );
}

// ルーターの設定
const router = createBrowserRouter([
  { path: '/', Component: Home },
  { path: '/child', Component: Child },
  { path: '/child/grandchild', Component: GrandChild },
]);

export default function App() {
  return (
    <>
      {/* 設定したルーターをReactで有効化 */}
      <RouterProvider router={router} />
    </>
  );
}

処理内容

  1. ホーム画面の表示とURLの確認
  2. 子コンポーネントの画面表示とURLの確認
  3. 孫コンポーネントの画面表示とURLの確認

React Router の loader（画面表示前にデータ取得）と action（フォーム送信処理）の使い方

React Router の loader と action とは？

React Router の loader とは、ページを表示する前に必要なデータを取得する仕組みのことで、ユーザー一覧を画面に表示するためにサーバーからデータを取得する GETのような役割 を果たします。
一方、React Router の action とは、フォームやボタンなどでデータを送信したあとに実行される処理のことで、新しいユーザーを追加するボタンを押したときにサーバーに送る POSTのような役割 を果たします。

React Router の loader（画面表示前にデータ取得）と action（フォーム送信処理）の使い方

  1. createBrowserRouter で ルーターの設定
  2. RouterProvider で 設定したルーターをReactで有効化
  3. useLoaderData で 画面表示前にデータを取得 ※ 追加
  4. useActionData で フォーム送信後に結果の取得 ※ 追加

コードが長くなるため、React Router の基本的な使い方のコード にコードを追加してあります。
※ ユーザー の データ取得(GET) と ユーザー追加(POST) の処理に json-server を使用しております。
json-server をインストールしていない場合は、下記よりインストールを行なってください。

【Tool】json-server のインストールと使い方
今回は、JSON ファイルを簡単に REST API に変換してくれる Node.js ライブラリ json-server について、インストール方法や使い方 をご紹介します。json-server とは？json-server とは、JS...
study-study.tachu-tachu.com
2026.02.26
 
import {
  createBrowserRouter,
  Link,
  useLoaderData, // 追加
  Form, // 追加
  redirect, // 追加
  useActionData, // 追加
} from 'react-router';
import { RouterProvider } from 'react-router/dom';

// ユーザー表示
export function Users() {
  // 画面表示前にデータを取得
  const users = useLoaderData();
  return (
    <div>
      <h2>Users</h2>
      <Link to="/users/add">新規作成</Link>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ユーザーの追加
export function AddUser() {
  // フォーム送信後に結果の取得
  const actionData = useActionData();
  return (
    <div>
      <h1>Add User</h1>
      <Form method="post">
        <input name="name" placeholder="名前" />
        <input name="age" type="number" placeholder="年齢" />
        <button type="submit">保存</button>
      </Form>
      {actionData?.error && <p>{actionData.error}</p>}
    </div>
  );
}

// ルーターの設定
const router = createBrowserRouter([
  // 追加 loader
  {
    path: '/users',
    loader: async () => {
      const res = await fetch('http://localhost:3001/users');
      return res.json();
    },
    Component: Users,
  },
  // 追加 action
  {
    path: '/users/add',
    action: async ({ request }) => {
      const formData = await request.formData();
      // 複数のフォームデータの取得
      const data = Object.fromEntries(formData.entries());
      // 特定のフォームデータのみ取得 ※コメントアウト
      // const name = formData.get('name');

      await fetch('http://localhost:3001/users', {
        method: request.method,
        // 複数のフォームデータをjson化
        body: JSON.stringify(data),
        // 特定のフォームデータをjson化 ※コメントアウト
        // body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' },
      });
      return redirect('/users');
    },
    Component: AddUser,
  },
]);

処理内容

  • /users 画面のユーザー表示とURLの確認
  • /users/add にて名前と年齢を入力し保存
  • /users 画面のユーザー一覧に追加したユーザーの表示の確認
  • /users/add にて再度、名前と年齢を入力し保存
  • /users 画面のユーザー一覧に後から追加したユーザーの表示の確認

React Router のネスト構造の使い方

React Router のネスト構造とは？

React Router の ネスト構造 とは、URLの構造と画面の構造を一致させる ことで、親ページの中に子ページや孫ページを表示できる仕組み です。
これにより、レイアウトを共有したり、タブのように画面の一部だけを切り替えたり、親の状態を保持したまま自然な画面遷移を実現できます。

React Router のネスト構造の使い方

  1. createBrowserRouter で ルーターの設定時に、childrenに子のコンポーネントやさらに孫コンポーネントを設定する
  2. RouterProvider で 設定したルーターをReactで有効化
  3. children に設定した 子のコンポーネント や 孫コンポーネントに Outlet を設定する

コードが長くなるため、React Router の基本的な使い方のコード にコードを追加してあります。

import {
  createBrowserRouter,
  Link,
  useLoaderData,
  Form,
  redirect,
  useActionData,
  Outlet, // 追加
  useMatch, // 追加
} from 'react-router';
import { RouterProvider } from 'react-router/dom';

// ダッシュボード
export function Dashboard() {
  // /dashboard/settings 配下のURLとの検証
  const matchSettings = useMatch('/dashboard/settings/*');

  return (
    <div>
      <h1>Dashboard</h1>
      {/* /dashboard/settings 配下以外のURLの場合は、settings のリンクを表示 */}
      {!matchSettings && <Link to="settings">Settingsへ</Link>}
      <Outlet />
    </div>
  );
}

// セッティング
export function Settings() {
  // /dashboard/settings 配下のURLとの検証
  const matchSettings = useMatch('/dashboard/settings/*');
  // /dashboard/settings/user-profile 配下のURLとの検証
  const matchUserProfile = useMatch('/dashboard/settings/user-profile');

  return (
    <div>
      <h2>Settings</h2>
      {/* /dashboard/settings/user-profile 配下以外のURLの場合は、user-profile のリンクを表示 */}
      {!matchUserProfile && <Link to="user-profile">User Profileへ</Link>}
      {/* /dashboard/settings 配下のURL かつ /dashboard/settings/user-profile 配下以外のURLの場合は、dashboard のリンクを表示 */}
      {matchSettings && !matchUserProfile && (
        <div>
          <Link to="..">dashboardに戻る</Link>
        </div>
      )}
      <Outlet />
    </div>
  );
}

// ユーザープロフィール
export function UserProfile() {
  // /dashboard/settings/user-profile 配下のURLとの検証
  const matchUserProfile = useMatch('/dashboard/settings/user-profile');
  return (
    <div>
      <h3>User Profile</h3>
      {/* /dashboard/settings/user-profile 配下のURLの場合は、settings のリンクを表示 */}
      {matchUserProfile && <Link to="..">Settingsに戻る</Link>}
      <Outlet />
    </div>
  );
}

// ルーターの設定
const router = createBrowserRouter([
  // ネスト構造 追加
  {
    // ダッシュボード
    path: '/dashboard',
    Component: Dashboard,
    children: [
      {
        // セッティング
        path: 'settings',
        Component: Settings,
        children: [
          {
            // ユーザープロフィール
            path: 'user-profile',
            Component: UserProfile,
          },
        ],
      },
    ],
  },
]);

処理内容

  • /dashboard 画面の「Dashboard」表示と「Settingsへ」のリンク表示 、URL の確認し、「Settingsへ」をクリック
  • /dashboard/settings 画面の「Dashboard」・「Settings」の表示と「User Profileへ」と「dashboardに戻る」のリンク表示 、URL の確認し、「User Profileへ」をクリック
  • /dashboard/settings/user-profile 画面の「Dashboard」・「Settings」・「User Profile」の表示と「Settingsに戻る」のリンク表示 、URL の確認、「Settingsに戻る」をクリック
  • /dashboard/settings 画面の「Dashboard」・「Settings」の表示と「User Profileへ」と「dashboardに戻る」のリンク表示 、URL の確認し、「dashboardに戻る」をクリック
  • /dashboard 画面の「Dashboard」表示と「Settingsへ」のリンク表示 、URL の確認

まとめ

React Router について、loader や action 、ネスト構造 もあわせて解説してきましたが、いかがでしたでしょうか？

React Router は、React.js アプリに URLと画面を結びつけるルーティング機能を追加するライブラリ のことで、データモード では データ取得やフォーム処理、ローディング状態の自動管理 も行うことができます。

まずは React Router の基本的な使い方をしっかり押さえ、小さな コンポーネント で試しながら、少しずつ loader や action 、ネスト構造 などを使えるようになっていきましょう。

公式サイト

React Router v7 ドキュメント 日本語版

React Router v7 ドキュメント 日本語版
react-router-docs-ja.techtalk.jp
tachu × tachu

Laravel / React フルスタックエンジニア

Webエンジニア歴15年、フリーランス歴8年で、PHP / Laravel を中心に、
React.js / Vue.js を用いたフルスタックでのWeb開発をしています。

技術記事は Laravel / React / Web開発 を中心に書いています。

Webサービスの開発、既存システム改善、機能追加、技術相談、小規模な開発など、お気軽にご相談ください。

お問い合わせ
React.js / Next.js
シェアする
tachu × tachu

コメント

タイトルとURLをコピーしました