【 React 】react-router-domの <Outlet /> コンポーネントの使い方

はじめに

こんにちは！今回は Reactアプリケーションでルーティング を管理するためのライブラリである react-router-dom の Outletコンポーネント について解説します。

1. Outlet とは？

Outlet は react-router-dom の一部であり、ルーティングされた子コンポーネントをレンダリングするために使用されます。

具体的には 親ルートコンポーネント内で子ルートコンポーネントを表示する場所 を指定します。

2. 例を通して学ぶ Outlet

以下のコード例を見てみましょう。この例では layout.tsx というレイアウトコンポーネントを作成し、その中で Outlet を使用しています。

2.1. layout.tsx コンポーネント

layout.tsx

import { Outlet } from 'react-router-dom';
import { Footer } from './common/Footer';
import { Header } from './common/SimpleHeader';

export type OutletContext = [];

export const Layout = (): JSX.Element => {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
};

layout.tsx コンポーネントは、ヘッダーとフッターを常に表示し、中央のコンテンツエリアに Outlet を配置しています。これにより、ルートによって異なるコンテンツが中央に表示されます。

2.2. ルーティングの設定

次に React Routerでルーティングを設定 します。
以下は、ルートパス (/) と /about パスに対して異なるコンポーネントを表示する例です。

route.ts

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout } from './layouts/Layout';
import { HomePage } from './pages/HomePage';
import { AboutPage } from './pages/AboutPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="about" element={<AboutPage />} />
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

この設定により、次のように動作します：

ルートパス (/) にアクセスすると、 コンポーネントが の場所にレンダリングされます。
/about パスにアクセスすると、 コンポーネントが の場所にレンダリングされます。
つまり、 コンポーネントは常にヘッダーとフッターを表示し、中央のコンテンツエリアには現在のルートに対応するコンポーネントが表示されます。これが の役割です。

3. まとめ

コンポーネントを使用することで 親ルートコンポーネントのレイアウトを一貫して保持しながら、子ルートごとに異なるコンテンツを表示する ことができます。

これは、アプリケーションの複数の部分で一貫したレイアウトを持たせたい場合に非常に便利です。

リンク

【 react-router-dom 】

【 React Router 】

【 React 】