MENU
  1. ホーム
  2. React
  3. ReactでNested Routesを活用した親子ルーティング完全ガイド

ReactでNested Routesを活用した親子ルーティング完全ガイド

React

Reactアプリケーションを構築する際、ページやコンポーネント間のスムーズな遷移を可能にするルーティングは欠かせない要素です。その中でも、親子関係を持つページを効率よく管理するために有効なのがNested Routes（ネストされたルート）です。この手法を用いることで、アプリケーションの構造をわかりやすく整理し、コードの再利用性を向上させることができます。本記事では、ReactのNested Routesを活用して親子関係のルーティングを実現する方法について、基本的な概念から実装例までを詳細に解説します。Nested Routesの使い方を習得することで、より拡張性の高いアプリケーションを構築するスキルを身につけましょう。

目次

Nested Routesの基礎概念


ReactにおけるNested Routes（ネストされたルート）とは、ルーティング構造を階層的に設定することで、親子関係を持つページやコンポーネント間の遷移を効率化する仕組みを指します。例えば、ブログアプリで「記事一覧」と「記事詳細」を親子関係として管理する場合、Nested Routesを用いると直感的で整理されたルーティング構造を作成できます。

基本的な仕組み


Nested RoutesはReact Routerの機能で、親ルートがレンダリングされている間に、子ルートが適切な位置で入れ子表示される仕組みです。これにより、共通のレイアウトを持つ複数のページを簡単に構築できます。

利用のメリット

  • コードの整理: 共通するUIやコンポーネントを親ルートで管理できるため、冗長なコードを減らせます。
  • URLの明確化: URLが階層構造を反映するため、アプリケーションのナビゲーションが直感的になります。
  • 拡張性: 子ルートを追加する際も、既存の構造を大きく変更せずに対応できます。

Nested Routesの基本例


以下のようなURL構造を想定します:

  • /dashboard (ダッシュボードの親ページ)
  • /dashboard/settings (設定ページ)

このような階層的な構造をReact Routerで簡単に表現できます。次項では、具体的な設定方法を解説します。

React RouterでNested Routesを設定する方法

React Routerを使用すると、簡単にNested Routes（ネストされたルート）を設定できます。以下では、具体的な手順をコード例とともに説明します。

基本的なセットアップ


まず、React Routerをインストールしていない場合は以下のコマンドでインストールします。

npm install react-router-dom

ルーティングの基本構造


以下は、react-router-domを使ったNested Routesの基本的な設定例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 各ページのコンポーネント
const Dashboard = () => <h2>Dashboard</h2>;
const Settings = () => <h2>Settings</h2>;
const Profile = () => <h2>Profile</h2>;

function App() {
  return (
    <Router>
      <Routes>
        {/* 親ルート */}
        <Route path="dashboard" element={<DashboardLayout />}>
          {/* 子ルート */}
          <Route index element={<Dashboard />} />
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </Router>
  );
}

// 親ルート用のレイアウトコンポーネント
const DashboardLayout = () => (
  <div>
    <h1>Dashboard Layout</h1>
    <Outlet />
  </div>
);

export default App;

コード解説

  • Routeの階層構造
    path="dashboard"を親ルートとし、その内部に子ルートを定義します。子ルートはpath="settings"やpath="profile"で指定します。
  • <Outlet />の利用
    親ルート内の<Outlet />は、子ルートがレンダリングされる場所を示します。この仕組みにより、親コンポーネントの一部を維持したまま子コンポーネントを表示できます。
  • index属性
    親ルートのデフォルト表示内容を指定するためにindex属性を使用します。これにより、/dashboardアクセス時に<Dashboard />が表示されます。

ブラウザでの挙動

  • http://localhost:3000/dashboard: 「Dashboard」が表示される。
  • http://localhost:3000/dashboard/settings: 「Settings」が表示される。
  • http://localhost:3000/dashboard/profile: 「Profile」が表示される。

この設定により、親子関係を持つページを効率的に管理できます。次の項目では、親子ルーティングの設計時に注意すべきポイントを解説します。

親子ルーティング構造を設計する際のポイント

Nested Routesを利用して親子ルーティング構造を設計する際には、アプリケーションの拡張性や保守性を高めるために、いくつかの重要なポイントを押さえておく必要があります。

1. URL構造の一貫性


URLはアプリケーションのナビゲーションの基盤となります。以下の点を意識して設計しましょう。

  • 階層構造を明確にする: 親子関係が直感的にわかるようにする。例: /dashboard/settingsのように親ルートの下に子ルートを配置する。
  • 短く簡潔なパス名: パス名を短くしつつ、意味が明確になるように工夫します。

推奨例

  • /products: 商品一覧
  • /products/:id: 商品詳細
  • /products/:id/reviews: 商品レビュー

2. 共通レイアウトの活用


親ルートで共通のレイアウト（ナビゲーションバーやサイドバーなど）を定義することで、子ルートでのコード重複を避けられます。これには<Outlet />を活用します。

例

const ParentLayout = () => (
  <div>
    <Header />
    <main>
      <Outlet />
    </main>
    <Footer />
  </div>
);

3. 動的ルートと静的ルートの組み合わせ


子ルートが動的パラメータ（例: :id）を必要とする場合、親ルートと組み合わせて正しく管理します。動的パスは柔軟ですが、混乱を防ぐために明確に設計しましょう。

注意点

  • 動的ルートが複数重なる場合、URLが煩雑になるため注意が必要です。
  • 必要に応じてuseParamsフックを使って動的な値を取得します。

4. エラーや例外の管理


不正なURLやエラー時の対応を事前に計画します。親ルートや子ルートに適切なエラーハンドリングを実装することで、ユーザー体験を向上させられます。

エラールートの設定例

<Route path="*" element={<NotFound />} />

5. 再利用性を意識した設計


共通するルートやコンポーネントを再利用できるように設計することで、コードの保守性を向上させます。特に、同じパターンを持つページが多い場合は、汎用的なコンポーネントを作成しましょう。

6. 認証や権限の考慮


認証が必要なルートの場合は、親ルートでの保護が有効です。ルート全体に適用する認証チェックを、親コンポーネントでまとめて実装します。

例

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
};

これらのポイントを押さえて設計を行うことで、拡張性とユーザー体験を両立したルーティング構造を構築できます。次項では、親子ルーティングの具体的な実装例をコードで示します。

コードで学ぶ親子ルーティングの実装例

ReactでNested Routesを利用した親子ルーティングを実装する具体的な例を示します。この例では、ダッシュボードを親ルートとし、その下に「設定ページ」と「プロフィールページ」を持つアプリケーションを構築します。

1. 初期セットアップ


以下の手順でReactプロジェクトをセットアップします。

npx create-react-app nested-routes-example
cd nested-routes-example
npm install react-router-dom

2. 親子ルーティングの実装

以下のコードをApp.jsに記述します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet, Link } from 'react-router-dom';

// 親ルート用コンポーネント
const Dashboard = () => (
  <div>
    <h1>Dashboard</h1>
    <nav>
      <ul>
        <li><Link to="settings">Settings</Link></li>
        <li><Link to="profile">Profile</Link></li>
      </ul>
    </nav>
    <Outlet /> {/* 子ルートをここに表示 */}
  </div>
);

// 子ルート用コンポーネント
const Settings = () => <h2>Settings Page</h2>;
const Profile = () => <h2>Profile Page</h2>;

// 404ページ
const NotFound = () => <h2>404 - Page Not Found</h2>;

function App() {
  return (
    <Router>
      <Routes>
        {/* 親ルート */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* 子ルート */}
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
        {/* その他のルート */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 実装の解説

  • <Dashboard />コンポーネント
    親ルートの役割を果たし、共通のレイアウト（タイトルとナビゲーション）を提供します。<Outlet />が子ルートの表示場所を決定します。
  • 子ルートの設定
    path="settings"やpath="profile"で、それぞれ「設定ページ」と「プロフィールページ」を定義しています。
  • 404エラールート
    path="*"で未定義のルートにアクセスした際のエラーページを設定しています。

4. 実行結果

  • アプリケーションを起動します:
  npm start
  • URLに応じた挙動:
  • http://localhost:3000/dashboard: 「Dashboard」とナビゲーションが表示されます。
  • http://localhost:3000/dashboard/settings: 「Settings Page」が表示されます。
  • http://localhost:3000/dashboard/profile: 「Profile Page」が表示されます。
  • http://localhost:3000/random: 「404 – Page Not Found」が表示されます。

5. 改良の余地

  • スタイリング: Tailwind CSSやCSS Modulesを用いて見た目を改善します。
  • 認証追加: ログイン状態を確認し、未認証の場合はログインページへリダイレクトする仕組みを実装します。
  • 動的パスの導入: 次項で解説する動的パスを追加することで、より柔軟なルーティングを実現できます。

これで基本的な親子ルーティングの実装は完了です。次は、動的パスやパラメータを活用した高度なルーティングについて解説します。

動的パスとパラメータの利用方法

動的パスは、URLの一部をパラメータとして扱い、動的にデータやページ内容を変更するための重要な仕組みです。React Routerを使用すると、動的なパラメータを簡単に扱うことができます。以下では、動的パスとパラメータを活用する方法を解説します。

1. 動的パスの基本


動的パスでは、URL内の一部をコロン（:）で指定します。例えば、/users/:idとすると、:idが動的パラメータとして扱われます。このパラメータはアクセスするURLによって異なる値を取ります。

例

  • /users/1 → id = 1
  • /users/42 → id = 42

2. 実装例: 動的パスのルート設定


以下のコードは、ユーザーの詳細情報を表示する例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams, Link } from 'react-router-dom';

// 動的ルートで表示する詳細ページ
const UserDetail = () => {
  const { id } = useParams(); // パラメータを取得
  return <h2>User Details for ID: {id}</h2>;
};

// ユーザー一覧ページ
const UserList = () => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ];

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

function App() {
  return (
    <Router>
      <Routes>
        {/* 動的ルート */}
        <Route path="users" element={<UserList />} />
        <Route path="users/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 実行結果

  • http://localhost:3000/users: ユーザーの一覧が表示されます。
  • http://localhost:3000/users/1: 「User Details for ID: 1」が表示されます。
  • http://localhost:3000/users/42: 「User Details for ID: 42」が表示されます。

4. パラメータの利用方法

React RouterのuseParamsフックを使用することで、パラメータにアクセスできます。取得した値は以下のように利用できます。

動的にデータを取得


パラメータを利用してAPIリクエストを動的に送信し、データを取得します。

const UserDetail = () => {
  const { id } = useParams();
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [id]);

  return user ? (
    <div>
      <h2>{user.name}'s Details</h2>
      <p>Email: {user.email}</p>
      <p>Phone: {user.phone}</p>
    </div>
  ) : (
    <p>Loading...</p>
  );
};

5. 注意点

  • URLのバリデーション: 存在しないパラメータの場合はエラーメッセージを表示する工夫が必要です。
  • データのキャッシュ: 頻繁に同じパラメータを利用する場合、データのキャッシュを考慮します。

6. 応用例: 複数のパラメータを使用する


複数のパラメータを設定することも可能です。

<Route path="users/:userId/posts/:postId" element={<PostDetail />} />

このように動的パスとパラメータを活用することで、柔軟で拡張性の高いReactアプリケーションを構築できます。次項では、レイアウトコンポーネントを活用した効率的なページ管理について解説します。

レイアウトコンポーネントを用いた効率的なページ管理

ReactアプリケーションでNested Routesを使用する際、レイアウトコンポーネントを活用することで、ページ全体の構造を効率的に管理できます。レイアウトコンポーネントは、ナビゲーションバーやフッターなどの共通要素を一元管理し、子ルートごとに異なるコンテンツを表示する仕組みを提供します。

1. レイアウトコンポーネントとは


レイアウトコンポーネントは、親ルートで使用されるコンポーネントであり、以下のような共通要素を含みます。

  • ナビゲーションバー
  • サイドバー
  • フッター

これにより、親ルートで定義した共通要素を維持しつつ、子ルートで異なるコンテンツを表示できます。

2. レイアウトコンポーネントの実装例

以下では、ダッシュボードにナビゲーションバーとフッターを持つレイアウトコンポーネントを作成します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet, Link } from 'react-router-dom';

// レイアウトコンポーネント
const DashboardLayout = () => (
  <div>
    <header>
      <h1>Dashboard</h1>
      <nav>
        <ul>
          <li><Link to="settings">Settings</Link></li>
          <li><Link to="profile">Profile</Link></li>
        </ul>
      </nav>
    </header>
    <main>
      <Outlet /> {/* 子ルートの内容をここに表示 */}
    </main>
    <footer>
      <p>© 2024 My Dashboard</p>
    </footer>
  </div>
);

// 各子ルートのコンポーネント
const Settings = () => <h2>Settings Page</h2>;
const Profile = () => <h2>Profile Page</h2>;

function App() {
  return (
    <Router>
      <Routes>
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route path="settings" element={<Settings />} />
          <Route path="profile" element={<Profile />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

3. 実行結果

  • 共通部分: すべてのページで<header>（ナビゲーションバー）と<footer>が表示されます。
  • 動的コンテンツ: <main>内では現在のルートに対応するコンポーネント（SettingsやProfile）が表示されます。

4. レイアウトコンポーネントの利点

  • コードの再利用性: 共通部分を一度定義するだけで、複数の子ルートで使用できます。
  • UIの一貫性: アプリケーション全体で統一されたデザインを維持できます。
  • 保守性の向上: 共通要素を変更する際、親ルートのレイアウトコンポーネントのみを修正すれば済みます。

5. 応用例: 複数のレイアウトを活用


アプリケーションが複数のセクション（例: 管理者用とユーザー用）を持つ場合、異なるレイアウトコンポーネントを作成し、柔軟に対応できます。

const AdminLayout = () => (
  <div>
    <header><h1>Admin Panel</h1></header>
    <Outlet />
    <footer>Admin Footer</footer>
  </div>
);

const UserLayout = () => (
  <div>
    <header><h1>User Dashboard</h1></header>
    <Outlet />
    <footer>User Footer</footer>
  </div>
);

ルートで異なるレイアウトを指定します。

<Routes>
  <Route path="admin/*" element={<AdminLayout />}>
    <Route path="settings" element={<AdminSettings />} />
  </Route>
  <Route path="user/*" element={<UserLayout />}>
    <Route path="profile" element={<UserProfile />} />
  </Route>
</Routes>

6. 注意点

  • パフォーマンスの最適化: レイアウトに大量の要素を含める場合、不要な再レンダリングを避ける工夫が必要です。
  • UIの分離: 親と子の責務を明確に分けることで、保守性を向上させます。

レイアウトコンポーネントを活用することで、コードの再利用性とデザインの統一性を両立した効率的なページ管理が可能になります。次項では、エラーハンドリングやルート保護の実装について解説します。

エラーハンドリングとルート保護の実装方法

アプリケーション開発において、適切なエラーハンドリングとルート保護を実装することは、ユーザー体験の向上とセキュリティ確保において重要な要素です。React Routerを活用して、エラーが発生した場合の対応や、特定の条件下でのみアクセスを許可するルートを設定する方法を解説します。

1. エラーハンドリングの実装

React Routerでエラールートを設定することで、未定義のページやエラーが発生した場合に適切なエラーメッセージを表示できます。

エラーページの設定例


以下は404ページを設定する例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const NotFound = () => <h2>404 - Page Not Found</h2>;

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        {/* 他のルート */}
        <Route path="*" element={<NotFound />} /> {/* 未定義ルートの処理 */}
      </Routes>
    </Router>
  );
}

export default App;

動的エラー表示


エラーページを動的にカスタマイズすることで、エラー内容に応じた柔軟な対応が可能です。

const ErrorPage = ({ errorCode }) => {
  const messages = {
    404: 'Page Not Found',
    500: 'Internal Server Error',
  };
  return <h2>{messages[errorCode] || 'An unknown error occurred'}</h2>;
};

利用例:

<Route path="*" element={<ErrorPage errorCode={404} />} />

2. ルート保護の実装

特定の条件（例: ユーザーの認証状態）を満たした場合のみルートにアクセスさせるルート保護を設定します。

ProtectedRouteコンポーネントの実装

以下は、認証されていない場合にログインページへリダイレクトする仕組みです。

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

利用例:

<Routes>
  <Route
    path="dashboard"
    element={
      <ProtectedRoute isAuthenticated={userLoggedIn}>
        <Dashboard />
      </ProtectedRoute>
    }
  />
  <Route path="login" element={<Login />} />
</Routes>

役割ベースの保護


認証だけでなく、ユーザーの権限に基づいた保護を実装することも可能です。

const RoleProtectedRoute = ({ userRole, requiredRole, children }) => {
  return userRole === requiredRole ? children : <Navigate to="/unauthorized" />;
};

// 利用例
<Route
  path="admin"
  element={
    <RoleProtectedRoute userRole={currentUser.role} requiredRole="admin">
      <AdminDashboard />
    </RoleProtectedRoute>
  }
/>

3. 実装時の注意点

  • リダイレクトのパフォーマンス: リダイレクトが多いとユーザー体験が損なわれるため、できるだけ自然な遷移を心がけます。
  • グローバルエラーハンドリング: アプリケーション全体で共通するエラー（例: API通信エラー）は、専用のエラーハンドリングロジックを導入します。
  • セキュリティ対策: フロントエンドでの保護だけでなく、バックエンドでの認証・認可も併用します。

4. 応用例: 保護とエラーハンドリングの統合

ルート保護とエラーハンドリングを組み合わせることで、シームレスなエラーメッセージとアクセス制限を実現します。

const GuardedRoute = ({ isAuthenticated, children }) => {
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return children || <ErrorPage errorCode={403} />;
};

利用例:

<Route
  path="profile"
  element={
    <GuardedRoute isAuthenticated={userLoggedIn}>
      <Profile />
    </GuardedRoute>
  }
/>

エラーハンドリングとルート保護を正しく実装することで、ユーザーにとって安全で快適なアプリケーションを提供できます。次項では、これらを応用したサンプルアプリケーションの設計と実装例を紹介します。

実践的な演習: Nested Routesを活用したサンプルアプリ

Nested Routesと関連する機能を活用し、動的な親子ルーティング、エラーハンドリング、ルート保護を組み合わせた実践的なサンプルアプリケーションを構築します。このアプリでは、ダッシュボード内で動的なユーザープロファイル表示、設定ページ、エラーページを実装します。

1. アプリの設計


以下のルート構造を持つアプリを構築します。

  • /dashboard: ダッシュボードのトップページ（共通レイアウト）
  • /dashboard/users: ユーザー一覧ページ
  • /dashboard/users/:id: 動的なユーザープロファイルページ
  • /dashboard/settings: 設定ページ
  • 未定義のURL: エラーページ

2. コード実装

以下のコードをApp.jsに記述します。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams, Navigate } from 'react-router-dom';

// ダッシュボードレイアウト
const DashboardLayout = () => (
  <div>
    <header>
      <h1>Dashboard</h1>
      <nav>
        <ul>
          <li><Link to="users">Users</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
    </header>
    <main>
      <Outlet /> {/* 子ルートをここに表示 */}
    </main>
    <footer>
      <p>© 2024 Dashboard App</p>
    </footer>
  </div>
);

// ユーザー一覧
const UserList = () => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ];
  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`${user.id}`}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

// ユーザープロファイル
const UserProfile = () => {
  const { id } = useParams();
  const user = {
    1: { name: 'Alice', email: 'alice@example.com' },
    2: { name: 'Bob', email: 'bob@example.com' },
    3: { name: 'Charlie', email: 'charlie@example.com' },
  }[id];

  return user ? (
    <div>
      <h2>{user.name}'s Profile</h2>
      <p>Email: {user.email}</p>
    </div>
  ) : (
    <Navigate to="/dashboard/users" /> // 不正なIDならリダイレクト
  );
};

// 設定ページ
const Settings = () => <h2>Settings Page</h2>;

// エラーページ
const NotFound = () => <h2>404 - Page Not Found</h2>;

function App() {
  return (
    <Router>
      <Routes>
        {/* ダッシュボードルート */}
        <Route path="dashboard" element={<DashboardLayout />}>
          <Route index element={<h2>Welcome to the Dashboard</h2>} />
          <Route path="users" element={<UserList />} />
          <Route path="users/:id" element={<UserProfile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        {/* その他のルート */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 実行結果

以下のURLにアクセスしてアプリを確認します。

  • /dashboard: ダッシュボードのウェルカムメッセージが表示されます。
  • /dashboard/users: ユーザー一覧が表示されます。
  • /dashboard/users/1: Aliceのプロファイルが表示されます。
  • /dashboard/users/99: 不正なIDの場合、ユーザー一覧にリダイレクトされます。
  • /dashboard/settings: 設定ページが表示されます。
  • 未定義のURL（例: /unknown）: 404ページが表示されます。

4. 改良ポイント

  • API連携: 静的データではなく、動的にAPIからデータを取得するように変更できます。
  • 認証の追加: ダッシュボード全体をルート保護し、認証済みユーザーのみアクセス可能にします。
  • スタイリング: Tailwind CSSやMaterial-UIを使用してデザインを向上させます。

5. 学びのポイント


このサンプルアプリを通じて以下を学べます:

  • Nested Routesを使った親子ルーティング構造
  • 動的パスとエラーハンドリングの統合
  • ルート保護を用いたセキュリティ強化

これにより、実践的なアプリケーションを構築するための基礎を習得できます。次項では、本記事のまとめを行います。

まとめ

本記事では、ReactでNested Routesを活用した親子関係のルーティングを実現する方法を解説しました。Nested Routesの基本概念から、React Routerを用いた設定方法、親子ルーティングの設計ポイント、動的パスやエラーハンドリング、ルート保護の実装まで、幅広く取り上げました。さらに、これらを応用した実践的なサンプルアプリも紹介しました。

Nested Routesを正しく活用することで、アプリケーションの構造が整理され、拡張性やメンテナンス性が向上します。また、ルート保護やエラーハンドリングを組み合わせることで、より安全でユーザーフレンドリーなアプリケーションを構築できます。

今回の知識を活用し、より効率的で直感的なReactアプリケーションの開発に挑戦してください。

React
ルーティング React Nested Routes

コメント

コメントする

目次