React Router の Outlet を使ってみる

ルーティングをイメージした画像

私はよく Next.js を使っているので、自動的にルーティングをしてくれます。

React を使用する場合は、自分でルーティングモジュールを入れなくてはいけません。

偶然 React Router を試す機会があったのでメモ記事です。

React Router とは？
Outlet とは？
- イメージ図
前提
React Router のモジュールをインストール
ページの準備
- Home.tsx
- About.tsx
レイアウト層を作成
ルーティング層を作る
動作確認！
まとめ

React Router とは？

React Router は、React アプリで クライアントサイドのルーティングを実現するライブラリです。
URL に基づいて特定のコンポーネントを表示し、ページ遷移時にもアプリ全体を再読み込みせずに高速で動作します。
SPA で ルーティングするときに最適 で、動的なパスやパラメータもサポート しています。

Outlet とは？

Outlet は、React Router で ネストされたルートをレンダリング するために使用されます。
具体的には 親ルートのコンポーネント内に配置 し、対応する子ルートが切り替わるたび にその場所に 表示されるコンテンツを差し込む 役割を果たします。

イメージ図

前提

Vite で React プロジェクトを作ってある状態とします。

$ yarn create vite
～省略～
✔ Project name: … my-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript
～省略～

React Router のモジュールをインストール

$ yarn add react-router-dom

ページの準備

Home.tsx

import { FC } from "react";

const Home: FC = () => {
  return (
    <div className="home">
      <h2>Home</h2>
      <p>Welcome to the homepage!</p>
    </div>
  );
};

export default Home;

About.tsx

import { FC } from "react";

const About: FC = () => {
  return (
    <div className="about">
      <h2>About</h2>
      <p>This is the about page.</p>
    </div>
  );
};

export default About;

レイアウト層を作成

import { FC } from "react";
import { Outlet, Link } from "react-router-dom";
import "./Layout.css";

const Layout: FC = () => {
  return (
    <div className="layout">
      {/* ヘッダー */}
      <header className="header">
        <h1>My Website</h1>
      </header>

      {/* サイドバーとメインコンテナ */}
      <div className="container">
        {/* サイドバー */}
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* メインコンテナ */}
        <main className="main-content">
          <Outlet />
        </main>
      </div>
    </div>
  );
};

export default Layout;

メインコンテナ内に ＜Outlet /＞ を入れておきます。css は省略します。

ルーティング層を作る

import Layout from "./layouts/Layout";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";

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

export default App;