今回は<Outlet />についてのメモの記事になります。

<Outlet />とは何か

親ルートの中に設定された子ルートの画面を表示するためのものです。

コードを見た方が理解が深まるのでそうします。

サンプルコード

下記のコードで考えます。

// 下記はApp.tsxとする
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import LoginPage from './pages/LoginPage';
import DashboardPage from './pages/DashboardPage';
import AccessProtect from './components/AccessProtect';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/login" element={<LoginPage />} />

                <Route element={<AccessProtect />}>
                    <Route
                        path="/dashboard"
                        element={<DashboardPage />}
                    />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

export default App;


// AccessProtect.tsxは下記とする、必要な部分のみ掲載
import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import axios from 'axios';

function AccessProtect() {
    return <Outlet />;
}

export default AccessProtect;

注目するのは下記のコードです。

<Route element={<AccessProtect />}>
    <Route
        path="/dashboard"
        element={<DashboardPage />}
    />
</Route>

このコードでは下記の関係になっています。

  • 親ルート：AccessProtect
  • 子ルート：DashboardPage

AccessProtect.tsxに「return <Outlet />」の記述があることで「return DashboardPage.tsx」といった感じになりDashboardPage.tsxを表示することができます。