react-router-dom v6で共通のヘッダを適用する

はじめに

Udemyの講座『Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版』の「セクション12：実践アプリ作成」に取り組んでいます。

講座ではCodeSandbox上でreact-router-domのv5を使用されていますが、私はローカル環境でv6を使用しています。

ルーティングの書き換えについては別の記事で書きました。

今回は、共通のヘッダを適用するにあたり書き換えを行いました。

環境

• React：18.2.0
• TypeScript：5.2.2
• ret-router-dom：6.21.1

コード

/home, /home/user_management, /home/settingに共通の<HeaderLayout />を適用させます。

ポイントは、

• path="home"のelementにヘッダを指定すること
• <HeaderLayout>内で<Outlet />を指定し、子コンポーネントを表示すること

Router.tsx

<Routes>
  <Route path="/" element={<Login />} />
  <Route path="home" element={<HeaderLayout />}>
    <Route index={true} element={<Home />} />
    <Route path="user_management" element={<UserManagement />} />
    <Route path="setting" element={<Setting />} />
  </Route>
  <Route path="*" element={<Page404 />}/>
</Routes>

HeaderLayout.tsx

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

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

終わりに

v5とv6では大幅に異なり、対応が大変です。。

参考