React Routerのネストされたルートの使い方を完全解説！初心者でもわかるルーティング設計
生徒
「ページの中にさらに別のページを表示することってできますか？」
先生
「はい、それはネストされたルートという仕組みで実現できます。」
生徒
「ネストってどういう意味ですか？」
先生
「親ページの中に子ページを入れるイメージです。それでは具体的に見ていきましょう！」
1. ネストされたルートとは
ネストされたルートとは、あるページの中にさらに別のページを表示する仕組みです。
例えばダッシュボード画面の中に設定ページやプロフィールページを表示する場合に使います。
一つの画面の中に複数の表示エリアを持つような構成を作ることができるため、実務でも非常によく使われます。
2. ネスト構造のイメージ
ネストされたルートは親と子の関係で構成されます。
親ルートの中に子ルートが入り込む形になります。
/dashboard
/dashboard/profile
/dashboard/settings
このようにURLが階層構造になっているのが特徴です。
3. 基本的なルートの定義方法
まずはネストされたルートの基本的な書き方を見ていきます。
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Profile from "./Profile";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
</BrowserRouter>
);
}
Routeの中にさらにRouteを書くことでネストが実現できます。
4. Outletコンポーネントの役割
ネストされたルートを表示するためにはOutletというコンポーネントが必要です。
これは子ルートを表示する場所を指定する役割を持っています。
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h1>ダッシュボード</h1>
<Outlet />
</div>
);
}
export default Dashboard;
Outletを使うことで、親のレイアウトを保ちながら中身だけを切り替えることができます。
5. ネストルートの実用例
実務では管理画面やマイページなどでよく使われます。
例えば左側にメニューを表示し、右側の内容だけを切り替えるといった構成が可能です。
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
このように複数の子ページをまとめて管理できます。
6. インデックスルートの使い方
親ルートにアクセスしたときの初期表示を設定することもできます。
<Route path="/dashboard" element={<Dashboard />}>
<Route index element={<Profile />} />
</Route>
indexを使うことでデフォルトの表示内容を簡単に設定できます。
7. ネストルートのメリット
ネストされたルートを使うことで、レイアウトを共通化できます。
例えばヘッダーやサイドバーを固定したまま、内容だけを切り替えることが可能です。
またコードの整理がしやすくなり、保守性も向上します。
8. 初心者がつまずきやすいポイント
Outletを忘れると子ルートが表示されません。
またパスの指定でスラッシュの付け方を間違えると正しく動作しないことがあります。
ネスト構造を意識してURLとコンポーネントの関係を理解することが重要です。
