React Router でネストされたルートをマスターする: 動的レイアウトを構築する

React Router のネストされたルート

React Router の

ネストされたルート を使用すると、他のルート内でルートを定義でき、複雑なレイアウトが可能になり、パスに応じて異なるコンポーネントを表示できます。この機能は、ダッシュボード、プロファイル、管理パネルなど、独自のサブルートを持つセクションを含むアプリケーションを構築する場合に特に役立ちます。

ネストされたルートは階層 URL の作成に役立ちます。各ルートには、親コンポーネント内に特定のコンテンツをレンダリングする子ルートを含めることができます。

---

ネストされたルートを作成する方法

React Router でネストされたルートを設定するには、Routes コンポーネントと Route コンポーネントを使用して親ルート内でルートを定義します。

ネストされたルートを実装する手順

1. 親ルート: 親コンポーネントのルートを定義します。
2. 子ルート: 親コンポーネント内に、子ルートを処理する追加の Route コンポーネントを含む Routes コンポーネントを作成します。
3. 子コンポーネントのレンダリング: 親コンポーネントに が含まれていることを確認します。コンポーネント。子コンポーネントをレンダリングするためのプレースホルダーとして機能します。

---

ネストされたルートの基本的な例

これは、親ルートとネストされたルートを定義する方法を示す基本的な例です:

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

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

説明:

• ダッシュボード コンポーネントは、ナビゲーション リンクと をレンダリングする 親ルート です。成分。 <アウトレット/>子ルートコンポーネントがレンダリングされるプレースホルダーとして機能します。
• プロファイルと設定コンポーネントは、ダッシュボード内のネストされたルートです。
• リンク コンポーネントはナビゲーションに使用され、クリックすると URL が更新され、それぞれのネストされたコンポーネント (/dashboard/profile または /dashboard/settings など) が表示されます。
• ダッシュボード内の Routes および Route コンポーネントは、ネストされたルートを定義し、URL が /dashboard/profile または /dashboard/settings と一致する場合に、適切なコンポーネントがレンダリングされるようにします。

---

パスパラメータを含むネストされたルート

動的パラメータを使用してネストされたルートを作成することもできます。

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

// Parent Component
const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile">Profile</Link></li>
          <li><Link to="settings">Settings</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

// Child Components
const Profile = () => <h3>Profile Page</h3>;
const Settings = () => <h3>Settings Page</h3>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Routes */}
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

説明:

• プロファイル コンポーネントは、URL (/dashboard/profile/:id) から 動的パラメーター を受け取ります。
• useParams() フックは、動的パラメーター (この場合は id.
) にアクセスするために使用されます。
• 親ルート /dashboard にはプロファイルごとに子ルートがあり、URL が変更されると (/dashboard/profile/1 など)、プロファイル コンポーネントにユーザーの ID が表示されます。

---

デフォルトのネストされたルートの処理

React Router は、デフォルトのネストされたルートを処理する方法を提供します。特定の子ルートが一致しない場合は、デフォルトのコンポーネントを表示できます。

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

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li><Link to="profile/1">Profile 1</Link></li>
          <li><Link to="profile/2">Profile 2</Link></li>
        </ul>
      </nav>
      <hr />
      <Outlet /> {/* Child route content will render here */}
    </div>
  );
};

const Profile = () => {
  const { id } = useParams();  // Retrieve the 'id' parameter from the URL
  return <h3>Profile Page for User: {id}</h3>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Parent Route */}
        <Route path="dashboard" element={<Dashboard />}>
          {/* Nested Route with Path Parameter */}
          <Route path="profile/:id" element={<Profile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

説明:

• インデックス ルートは、親ルートは一致するが子パスが提供されていない場合に、デフォルト コンポーネントを定義するために使用される特別なルートです。
• この場合、/dashboard はデフォルトで DashboardHome コンポーネントをレンダリングしますが、/dashboard/profile または /dashboard/settings にアクセスすると、それぞれのコンポーネントが表示されます。

---

結論

React Router のネストされたルートは、階層構造を持つ複雑な UI を構築するために不可欠な機能です。これらを使用すると、ナビゲーションをクリーンで動的に保ちながら、アプリケーションをより小さく管理しやすいコンポーネントに分割できます。 <アウトレット /> を使用することにより、コンポーネントを使用すると、親コンポーネント内に子ルートをレンダリングでき、動的パラメーター、デフォルト ルート、ネストされた URL 構造を使用してルーティングをさらにカスタマイズできます。

---

以上がReact Router でネストされたルートをマスターする: 動的レイアウトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。