【React】react-router-dom v6のレイアウトコンポーネントの渡し方

はじめに

Reactのルーティングの学習を進めていく中で、学習教材の中ではreact-router-domのバージョン5を使用していましたがバージョン6で記述したいと思い、バージョン別の記述法を調べました。

問題

レイアウトのコンポーネントの表示の仕方がわからなくて困った。
以下はv5。v6でリファクタしたい。

Router.jsx

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import { Header } from "../components/templates/Header";

export const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <DefaultLayout>
            <Top />
          </DefaultLayout>
        </Route>
        <Route exact path="/users">
          <Header>
            <Users />
          </Header>
        </Route>
      </Switch>
    </BrowserRouter>
  );
};

解決方法

Routeで囲ってelementにレイアウトのコンポーネントを渡す。

Router.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import { Header } from "../components/templates/Header";

export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<DefaultLayout />}>
          <Route path="/" element={<Top />}></Route>
        </Route>
        <Route element={<Header />}>
          <Route path="/users" element={<Users />}></Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

おわりに

公式のドキュメントを読むことで解決法に辿り着くことができました。
英語のドキュメントに身構えず、DeepLを使いながらドキュメントをしっかり読むことが重要だと再認識しました。

参考