Verständnis verschachtelter Routing in React

Dieses Tutorial zeigt eine verschachtelte Routing in React -Anwendungen mit React -Router. Wir erstellen eine einfache Website, um das Konzept und die Implementierung zu veranschaulichen.

Verschachtelte Routen

verstehen

Bevor Sie in den Code eintauchen, untersuchen wir die Struktur der Website. Die Hauptnavigation enthält Links zu einer Startseite, einem Dashboard und einem Produktabschnitt. Home und Dashboard haben einfache Routen (/home, /dashboard). Der Produktabschnitt verwendet jedoch verschachtelte Routen für eine bessere Organisation. Im Bereich Produkte werden wir Routen zum Suchen, zum Anzeigen einer Produktliste, zum Hinzufügen eines neuen Produkts und zum Anzeigen einzelner Produktdetails haben. Diese verschachtelten Routen werden unter /products strukturiert, was zu Pfaden wie /products/add, /products/all und /products/search

führt

Einrichten des Projekts

Wir werden eine Projektstruktur mit Komponenten verwenden, die in Ordnern organisiert sind. Erstellen Sie die folgenden Dateien:

• Home.js, Dashboard.js (in einem components Ordner)
• Products.js, AddProduct.js, ProductsList.js, SingleProduct.js, ProductSearch.js (alle innerhalb eines components/products Ordners).

React -Router

installieren

Installieren Sie das erforderliche Paket: npm install react-router-dom

Implementieren von Routen in app.js

Die Datei App.js enthält die Hauptrouting -Konfiguration. Importieren Sie zunächst die erforderlichen Komponenten:

import { BrowserRouter as Router, Link, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./components/Home";
import Products from "./components/products/Products";
import Dashboard from "./components/Dashboard";
import ProductsSearch from "./components/products/ProductsSearch";
import AddProduct from "./components/products/AddProduct";
import SingleProduct from "./components/products/SingleProduct";
import ProductsList from "./components/products/ProductsList";

Definieren Sie als nächstes die Routen innerhalb der App -Komponente:

function App() {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/dashboard">Dashboard
        <link to="/products/search">Products
      </nav>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/dashboard" element="{<Dashboard"></route>} />
        <route path="/products" element="{<Products"></route>}>
          <route path="search" element="{<ProductsSearch"></route>} />
          <route path="list" element="{<ProductsList"></route>} />
          <route path="add" element="{<AddProduct"></route>} />
          <route path=":id" element="{<SingleProduct"></route>} />
        
      </routes>
    </router>
  );
}

export default App;

Beachten Sie, wie die verschachtelten Routen für /products als Kinder der /products Route definiert werden. Dies schafft die verschachtelte Struktur. Der Parameter :id in der Route SingleProduct ermöglicht eine dynamische Routing basierend auf einer Produkt -ID.

Dynamische Routen und Daten abrufen

Die SingleProduct -Komponente muss wahrscheinlich Daten basierend auf dem Parameter id abrufen. Sie können useParams Hook von react-router-dom verwenden, um auf diesen Parameter zuzugreifen. Denken Sie daran, die Beispieldaten durch Ihren tatsächlichen Datenabrufmechanismus zu ersetzen.

Schlussfolgerung

Dieses Tutorial bietet ein praktisches Beispiel für verschachteltes Routing in React. Durch die sorgfältige Strukturierung Ihrer Routen können Sie gut organisierte und wartbare React-Anwendungen erstellen. Der vollständige Quellcode (der hier nicht für Kürze nicht enthalten ist) kann angepasst und erweitert werden, um Ihren spezifischen Anforderungen gerecht zu werden. Denken Sie daran, die Dokumentation von React Router für fortschrittlichere Funktionen und Optionen zu konsultieren.

Das obige ist der detaillierte Inhalt vonVerständnis verschachtelter Routing in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!