Comprendre le routage imbriqué dans la réaction

Ce tutoriel démontre le routage imbriqué dans les applications React à l'aide du routeur React. Nous allons créer un site Web simple pour illustrer le concept et la mise en œuvre.

Comprendre les routes imbriquées

Avant de plonger dans le code, examinons la structure du site Web. La navigation principale comprend des liens vers une page d'accueil, un tableau de bord et une section de produits. Le tableau de bord et le tableau de bord ont des itinéraires simples (/home, /dashboard). La section des produits, cependant, utilise des itinéraires imbriqués pour une meilleure organisation. Dans la section Produits, nous aurons des itinéraires pour la recherche, la visualisation d'une liste de produits, l'ajout d'un nouveau produit et la visualisation des détails des produits individuels. Ces routes imbriquées seront structurées sous /products, ce qui entraîne des chemins comme /products/add, /products/all et /products/search.

Configuration du projet

Nous utiliserons une structure de projet avec des composants organisés dans des dossiers. Créez les fichiers suivants:

• Home.js, Dashboard.js (dans un dossier components)
• Products.js, AddProduct.js, ProductsList.js, SingleProduct.js, ProductSearch.js (le tout dans un dossier components/products).

Installation du routeur de réact

Installez le package nécessaire: npm install react-router-dom

Implémentation de routes dans app.js

Le fichier App.js contiendra la configuration de routage principale. Tout d'abord, importez les composants nécessaires:

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";

Ensuite, définissez les itinéraires dans le composant App:

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;

Remarquez comment les routes imbriquées pour /products sont définies comme des enfants de la route /products. Cela crée la structure imbriquée. Le paramètre :id dans la route SingleProduct permet un routage dynamique basé sur un ID de produit.

Les routes dynamiques et la récupération des données

Le composant SingleProduct devra probablement récupérer des données en fonction du paramètre id. Vous pouvez utiliser useParams Hook de react-router-dom pour accéder à ce paramètre. N'oubliez pas de remplacer l'exemple de données par votre mécanisme de récupération de données réelles.

Conclusion

Ce tutoriel fournit un exemple pratique de routage imbriqué dans React. En structurant soigneusement vos itinéraires, vous pouvez créer des applications React bien organisées et maintenables. Le code source complet (bien que non inclus ici pour Brevity) peut être adapté et élargi pour répondre à vos besoins spécifiques. N'oubliez pas de consulter la documentation du routeur React pour des fonctionnalités et des options plus avancées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!