React Academy · レッスン

ネストしたルートとOutletレイアウト

Q: 「ネストしたルートとOutletレイアウト」で何を学びますか？

ネストした と コンポーネントを使って、複数階層のルートレイアウトを構築します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ネストしたとコンポーネントを使って、複数階層のルートレイアウトを構築します。

「ネストしたルートとOutletレイアウト」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ネストされたルートとは

React Router v6 のネストされたルートを使うと、レイアウトを組み合わせられます。親ルートがシェル（ナビゲーションやサイドバー）をレンダリングし、子ルートが <Outlet /> を通じてコンテンツ領域を埋めます。

ネストされたルートの定義

ルーターの設定で、親の <Route> の内側に子の <Route> 要素を配置します。親のパスはすべての子ルートのプレフィックスになります。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

Outlet コンポーネント

<Outlet /> は、親レイアウトコンポーネント内のプレースホルダーです。React Router は、これを一致した子ルートの要素に置き換えます。

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

インデックスルート

index: true のルートは、親の URL が完全に一致したときにレンダリングされます。他の子ルートのパスが一致しない場合のデフォルトの子ルートとして機能します。

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

多段階のネスト

ルートは複数の階層にわたってネストできます。連続する各レイアウトコンポーネントは、自分の子ルート用に <Outlet /> をレンダリングします。

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Outlet のコンテキスト

<Outlet /> の context prop を介してレイアウトからネストされた子ルートへデータを渡し、子ルートでは useOutletContext() で読み取ります。

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

パスなしルートによる名前付きレイアウト

path のないルートは、URL セグメントを追加せず、レイアウト目的で子ルートをラップします。共通のレイアウトの下にルートをまとめる場合に便利です。

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

ネストされたルートでの相対リンク

ネストされたルート内では、<Link to='sibling'> は HTML の相対 URL と同じように、現在のルートのパスを基準に解決されます。

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

ネストされたルートでの useMatch

useMatch(pattern) は、現在の URL がパターンに一致したときに一致データを返します。ネストされたレイアウトでアクティブなリンクのスタイルを設定する場合に便利です。

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

セグメントごとのエラーバウンダリー

ネストされた任意のルートに errorElement を追加すると、レイアウト全体をクラッシュさせずに、そのセグメント内だけのエラーを捕捉できます。

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

実践パターン：ダッシュボードレイアウト

一般的なダッシュボードでは、アプリのシェル（ヘッダーとサイドバー）用に最上位のルートを配置し、各セクション用にネストされたルートを使用します。これにより、コンテンツ領域だけが変わり、シェルはマウントされたままになります。

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

理解度チェック

一致した子ルートを表示するには、親レイアウトがどのコンポーネントをレンダリングする必要がありますか？

まとめ

ネストされたルートを使うと、親ルートで永続的なレイアウトをレンダリングし、子ルートで <Outlet /> を埋められます。デフォルトの子ルートにはインデックスルートを、共通レイアウトにはパスなしルートを使用し、useOutletContext でデータを子へ渡します。

よくある質問

「ネストしたルートとOutletレイアウト」レッスンは無料ですか？

はい。「ネストしたルートとOutletレイアウト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「ネストしたルートとOutletレイアウト」で何を学びますか？

ネストしたとコンポーネントを使って、複数階層のルートレイアウトを構築します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ネストしたルートとOutletレイアウト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る