ネストされたルート

React Router では、ルート定義を入れ子（ネスト）構造で記述することで、親ルートに共通レイアウトやメニューを持たせつつ、子ルートにコンテンツを切り替えることができます。

構成イメージ

/dashboard        ← 親ルート
  ├─ /dashboard/profile   ← 子ルート
  └─ /dashboard/settings  ← 子ルート

ルート定義（App.tsx）

import { BrowserRouter, Routes, Route } from "react-router-dom";
import DashboardLayout from "./layouts/DashboardLayout";
import Profile from "./pages/Profile";
import Settings from "./pages/Settings";

const App = () => {
  return (

<BrowserRouter>

<Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

• path="profile" や path="settings" は親の /dashboard を起点とした相対パス。
• element={<DashboardLayout />} の中で <Outlet /> を配置して子ルートを描画します。

レイアウトコンポーネント（DashboardLayout.tsx）

import { Outlet, Link } from "react-router-dom";

const DashboardLayout = () => {
  return (

<div>

<h1>Dashboard</h1>

<nav>
        <Link to="profile">プロフィール</Link>
        <Link to="settings">設定</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
};

export default DashboardLayout;

• <Outlet /> が子ルート（Profile や Settings）を表示するプレースホルダーになります。

子ページの例（Profile.tsx）

const Profile = () => {
  return 
<div>プロフィールページです</div>;
};

export default Profile;

補足：index ルート

親ルートにアクセスしたときのデフォルト子ルートを指定したい場合は index 属性を使います。

<Route index element={<DashboardHome />} />

この例では、/dashboard にアクセスした際に <DashboardHome /> が表示されます。

注意点

• ネストされたパスを記述する際、親ルートに対して相対で指定する点に注意してください。
• <Outlet /> を配置しないと子ルートは描画されません。