Beherrschen verschachtelter Routen im React Router: Erstellen dynamischer Layouts

Verschachtelte Routen im React Router

Verschachtelte Routen in React Router ermöglichen es Ihnen, Routen innerhalb anderer Routen zu definieren, was komplexe Layouts und die Möglichkeit ermöglicht, je nach Pfad unterschiedliche Komponenten anzuzeigen. Diese Funktion ist besonders nützlich für die Erstellung von Anwendungen mit Abschnitten, die über eigene Unterrouten verfügen, z. B. Dashboards, Profile oder Admin-Panels.

Verschachtelte Routen helfen beim Erstellen hierarchischer URLs, wobei jede Route untergeordnete Routen haben kann, die bestimmte Inhalte innerhalb ihrer übergeordneten Komponente rendern.

---

So erstellen Sie verschachtelte Routen

Um verschachtelte Routen in React Router einzurichten, definieren Sie Routen innerhalb einer übergeordneten Route mithilfe der Routen- und Routenkomponenten.

Schritte zum Implementieren verschachtelter Routen

1. Übergeordnete Route: Definieren Sie eine Route für eine übergeordnete Komponente.
2. Untergeordnete Routen: Erstellen Sie innerhalb der übergeordneten Komponente eine Routenkomponente mit zusätzlichen Routenkomponenten, um untergeordnete Routen zu verwalten.
3. Untergeordnete Komponenten rendern: Stellen Sie sicher, dass die übergeordnete Komponente ein enthält. Komponente, die als Platzhalter für die Darstellung der untergeordneten Komponenten fungiert.

---

Grundlegendes Beispiel für verschachtelte Routen

Hier ist ein einfaches Beispiel, das zeigt, wie eine übergeordnete Route und verschachtelte Routen definiert werden:

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;

Erklärung:

• Die Dashboard-Komponente ist die übergeordnete Route, die die Navigationslinks und das Komponente. Das Dient als Platzhalter, an dem untergeordnete Routenkomponenten gerendert werden.
• Die Profil- und Einstellungskomponenten sind die verschachtelten Routen im Dashboard.
• Die Link-Komponenten werden für die Navigation verwendet. Wenn sie angeklickt werden, aktualisieren sie die URL und rendern die entsprechenden verschachtelten Komponenten (z. B. /dashboard/profile oder /dashboard/settings).
• Die Routen- und Routenkomponenten im Dashboard definieren die verschachtelten Routen und stellen sicher, dass die entsprechenden Komponenten gerendert werden, wenn die URL mit /dashboard/profile oder /dashboard/settings übereinstimmt.

---

Verschachtelte Routen mit Pfadparametern

Sie können auch verschachtelte Routen mit dynamischen Parametern erstellen.

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;

Erklärung:

• Die Profilkomponente erhält einen dynamischen Parameter von der URL (/dashboard/profile/:id).
• Der useParams()-Hook wird verwendet, um auf den dynamischen Parameter zuzugreifen, in diesem Fall id.
• Die übergeordnete Route /dashboard verfügt über untergeordnete Routen für jedes Profil, und wenn sich die URL ändert (z. B. /dashboard/profile/1), zeigt die Profilkomponente die ID des Benutzers an.

---

Verwaltung verschachtelter Standardrouten

React Router bietet eine Möglichkeit, standardmäßig verschachtelte Routen zu verarbeiten. Wenn keine bestimmte untergeordnete Route übereinstimmt, können Sie eine Standardkomponente anzeigen.

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;

Erklärung:

• Die Indexroute ist eine spezielle Route, die zum Definieren der Standardkomponente verwendet wird, wenn die übergeordnete Route übereinstimmt, aber kein untergeordneter Pfad angegeben ist.
• In diesem Fall rendert /dashboard standardmäßig die DashboardHome-Komponente, aber wenn auf /dashboard/profile oder /dashboard/settings zugegriffen wird, wird die entsprechende Komponente angezeigt.

---

Fazit

Verschachtelte Routen in React Router sind eine wesentliche Funktion für den Aufbau komplexer Benutzeroberflächen mit hierarchischen Strukturen. Sie ermöglichen es Ihnen, Ihre Anwendung in kleinere, überschaubare Komponenten zu unterteilen und gleichzeitig die Navigation sauber und dynamisch zu halten. Durch die Verwendung des Komponente können Sie untergeordnete Routen innerhalb einer übergeordneten Komponente rendern und das Routing mit dynamischen Parametern, Standardrouten und verschachtelten URL-Strukturen weiter anpassen.

---

Das obige ist der detaillierte Inhalt vonBeherrschen verschachtelter Routen im React Router: Erstellen dynamischer Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!