【React】Outletの使い方

今回はルーティングで使用するOutletについて、使い方と豆知識をご紹介します！

ネストされたルーティングを簡潔に表示してくれるOutlet
豆知識

ネストされたルーティングを簡潔に表示してくれるOutlet

ルーティングをネストする時ありますよね。

v5の時代は配列でネストされたルーティングを設定して親コンポーネントでrender()やmap()を書いていく方法があったらしいのですが、とってもコードが長くなる上に見通しも悪かったようにお見受けしました。
（文章で説明してるだけでもめんどくさそう…）

しかしv6ではreact-router-domからOutletをimportすることで簡単にレイアウトを整えることができます！

以下が完成系のコードです。

// Router.tsxコンポーネントのコード

import { memo } from "react"
import { Routes, Route } from "react-router-dom";

import { Login } from "../components/pages/Login";
import { Home } from "../components/pages/Home";
import { UserManagement } from "../components/pages/UserManagement";
import { Setting } from "../components/pages/Setting";
import { Page404 } from "../components/pages/Page404";
import { HeaderLayout } from "../components/templates/HeaderLayout";

export const Router = memo(() => {
    return (
        <Routes>
            {/* ログインページ */}
            <Route path="/" element={<Login />} />

            {/* ログイン後のページ */}
            <Route path="home" element={<HeaderLayout />}>
                <Route index element={<Home />} />
                <Route path="user_management" element={<UserManagement />} />
                <Route path="setting" element={<Setting />} />
            </Route>

            {/* 404ページ */}
            <Route path="*" element={<Page404 />} />
        </Routes>
    );
});

{/* ログイン後のページ */}のところがネストされたルーティング箇所です。

// HeaderLayout.tsxコンポーネントのコード

import { memo } from "react";
import { Outlet } from "react-router-dom";
import { Header } from "../organism/layout/Header";

export const HeaderLayout = memo(() => {
    return(
        <>
            <Header />
            <Outlet />
        </>
    );
});

さて順を追って説明します。

①ネストされたルーティングの書き方

{/* ログイン後のページ */}
<Route path="home" >
　　<Route index element={<Home />} />
  <Route path="user_management" element={<UserManagement />} />
  <Route path="setting" element={<Setting />} />
</Route>

親コンポーネントは<Route path=”home”></Route>です。

子コンポーネントとしてHome,UserManagement,Settingコンポーネントが存在します。

URL	表示されるコンポーネント
~~~/home	Home
~~~/home/user_management	UserManagement
~~~/home/setting	Setting

②レイアウトを親コンポーネントに追記する

{/* ログイン後のページ */}
<Route path="home" element={<HeaderLayout />}　>　　　　　　　　//←element以下、追記
　　<Route index element={<Home />} />
  <Route path="user_management" element={<UserManagement />} />
  <Route path="setting" element={<Setting />} />
</Route>

HeaderLayoutは親に当たるので、3つの子コンポーネントを包含することになります。

③HeaderLayoutコンポーネントにOutletをimportし、returnで<Outlet />を返す

// HeaderLayout.tsxコンポーネントのコード

import { memo } from "react";
import { Outlet } from "react-router-dom";
import { Header } from "../organism/layout/Header";

export const HeaderLayout = memo(() => {
    return(
        <>
            <Header />
            <Outlet />
        </>
    );
});

<Outlet />を置くことで、Home,UserManagement,Settingの3つをURL別に出し分けてくれます。