【react-router-dom v7】ルーティングのネスト

はじめに

• SwitchではなくRoutesを使うようになっていたので、今の方法を調べた

問題

• ネストしたルーティングを書きたいが書き方不明

解決

親コンポーネント

• 以下のようにすると /dashboard/settings のパスで見た時に子コンポーネントがレンダリングされる

<Routes>
  <Route path="dashboard" element={<Dashboard />}>
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

子コンポーネント

import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

終わりに

• 結局公式ドキュメントを読むのがシンプルに書かれていて早い。今はAI slopも多いので特に根拠とできないような質の高くない記事については注意が必要。