Zenn
🐶

React Router Outlet とは？用途を簡潔に解説 !

に公開
React
初心者
TypeScript
outlet
猿でもわかる
tech

Outletを使う目的

  • 課題:
    • ユーザー画面に共通ヘッダーをつけたい
    • 管理者画面には別のサイドバーをつけたい
    • 全ページに同じコードをコピペしたくない
  • 解決策:
    • Outletを使えば、グループごとに共通レイアウトをスマートに適用できる

Outletの概要

  • 役割: 子コンポーネントを描画するための「場所取り」
  • 場所: 共通レイアウト（親コンポーネント）の中に置く
  • 効果: 親はそのまま、Outlet部分の中身だけをURLに応じて入れ替える

コード比較: Outletあり/なし

❌ NG例: Outletなし

  • 各ページにHeader等を毎回インポートして記述。

// UserProfile.js
import UserHeader from './UserHeader';

function UserProfile() {
  return (
    <div>
      <UserHeader />
      <main>プロフィール</main>
    </div>
  );
}

✅ OK例: Outletあり

  • 1. 共通レイアウトを作成しOutletを配置

// UserLayout.js
import { Outlet } from 'react-router-dom';

function UserLayout() {
  return (
    <div>
      <UserHeader />
      <Outlet /> {/* ← ここに中身が入る */}
    </div>
  );
}
  • 2. ルーティングを親子構造にする

// App.js
<Route path="/user" element={<UserLayout />}>
  <Route path="profile" element={<UserProfile />} />
</Route>
  • UserProfile.jsはコンテンツの中身だけでOKになる。

メリット・デメリット

👍 メリット

  • 保守性UP: レイアウト修正が1ファイルで完了する
  • 高速化: 共通部分は再描画されないので、ページ遷移が速い
  • コード分離: 「共通部分」と「ページ固有の中身」を完全に分けられる

👎 デメリットと注意点

  • 可読性低下: ルートのネスト（入れ子）が深くなると見にくくなる
  • State維持: 親コンポーネントの状態がリセットされない点に注意が必要

まとめ: 使いどころ

🚀 使うと便利なとき

  • ダッシュボード
  • マイページ
  • 管理画面
  • → 決まった枠組みを持つページ群

🤔 要注意な時

  • ほとんどのページが独自レイアウトの場合
  • ページ遷移ごとにStateを完全に初期化したい場合

Next.jsの場合：標準機能で実現

  • Next.jsでは<Outlet />は使いません。
  • 代わりに、Layout（layout.js） というファイルベースの仕組みが同じ役割を果たします。
  • appディレクトリ内にlayout.jsを作成すれば、それが共通レイアウトとなり、ネストされた子ページが自動的にその中に描画されます。
  • フレームワークに同等の機能が組み込まれているため、react-router-domに頼る必要がないのです。

参考文献

  • React Router 公式ドキュメント: <Outlet>
    • https://reactrouter.com/en/main/components/outlet

Discussion