React RouterのLayoutについて徹底解説

React RouterのLayoutは、複数のルートで共通して表示されるコンポーネントを定義するための仕組みです。たとえば、ナビゲーションバーやサイドバー、フッターなど、どのページにも表示したい要素を一度だけ定義し、再利用可能にすることができます。

[目次を開く]

Layoutのメリット Layoutの実装方法 1. React Routerのインストール 2. Layoutコンポーネントの作成 3. ルーティングの設定 4. 子コンポーネントの作成 Outletを使った子コンポーネントのレンダリング Outletの活用例動的なレイアウトの実現まとめ

Layoutのメリット

コードの再利用性：一箇所で共通部分を管理でき、メンテナンスが容易。
設計の効率化：共通要素の定義に集中でき、個別ページの開発に専念可能。
ルート管理の簡略化：複数ルート間で統一感のあるデザインを保つことができる。

Layoutの実装方法

以下では、React Routerを用いてLayoutを実装する手順を具体的に説明します。

1. React Routerのインストール

React Routerを使用するには、まずライブラリをインストールします。

# ReactにReact Routerを追加する場合
npm install react-router-dom

or

# 新しくプロジェクトを作成する場合
npx create-react-router@latest react-router-v7-sdudy

2. Layoutコンポーネントの作成

共通部分を含むLayoutコンポーネントを作成します。

import { Outlet, Link } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <header>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
      </header>
      <main>
        {/* 子ルートのコンポーネントが表示される */}
        <Outlet />
      </main>
      <footer>
        <p>© 2025 Your Website</p>
      </footer>
    </div>
  );
};

export default Layout;

3. ルーティングの設定

次に、React Routerのルート設定にLayoutを組み込みます。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

4. 子コンポーネントの作成

Home、About、Contactなどの個別ページを作成します。

const Home = () => <h1>Welcome to Home Page</h1>;
const About = () => <h1>About Us</h1>;
const Contact = () => <h1>Contact Us</h1>;

Outletを使った子コンポーネントのレンダリング

OutletはReact Routerの特殊なコンポーネントで、現在のルートに基づいて適切な子コンポーネントを表示します。これにより、Layout内でページごとの内容を簡単に切り替えることができます。

Outletの活用例

以下のようにLayoutに定義したOutletが、現在のルートに対応するコンポーネント（HomeやAbout）を自動的にレンダリングします。

/ ⇒ Homeが表示される。
/about ⇒ Aboutが表示される。
/contact ⇒ Contactが表示される。

動的なレイアウトの実現

場合によっては、ページによって異なるレイアウトが必要なこともあります。この場合、以下のように複数のLayoutコンポーネントを作成することで対応可能です。

const DashboardLayout = () => (
  <div>
    <aside>Sidebar</aside>
    <main><Outlet /></main>
  </div>
);

そして、ルート設定で適切なレイアウトを指定します。

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route><Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} />
  </Route>
</Routes>

まとめ

React RouterのLayoutは、アプリケーションの共通部分を効率的に管理するための強力なツールです。Outletを活用することで、ページごとに異なるコンテンツを柔軟に表示できます。また、必要に応じて複数のレイアウトを組み合わせることで、複雑な要件にも対応可能です。

ぜひ、今回紹介した手法を活用して、保守性の高いReactアプリケーションを構築してください。

アルアカ - Arcadia Academia