Maîtriser les routes imbriquées dans React Router : créer des mises en page dynamiques

Routes imbriquées dans React Router

Les

Routes imbriquées dans React Router vous permettent de définir des itinéraires au sein d'autres itinéraires, permettant des mises en page complexes et la possibilité d'afficher différents composants en fonction du chemin. Cette fonctionnalité est particulièrement utile pour créer des applications avec des sections possédant leurs propres sous-routes, telles que des tableaux de bord, des profils ou des panneaux d'administration.

Les routes imbriquées aident à créer des URL hiérarchiques, où chaque route peut avoir des routes enfants qui restituent un contenu spécifique à l'intérieur de leur composant parent.

---

Comment créer des itinéraires imbriqués

Pour configurer des routes imbriquées dans React Router, vous définissez des routes au sein d'une route parent à l'aide des composants Routes et Route.

Étapes pour implémenter des itinéraires imbriqués

1. Parent Route : Définissez une route pour un composant parent.
2. Routes enfants : à l'intérieur du composant parent, créez un composant Routes avec des composants Route supplémentaires pour gérer les routes enfants.
3. Rendre les composants enfants : assurez-vous que le composant parent contient un composant, qui agit comme un espace réservé pour le rendu des composants enfants.

---

Exemple de base d'itinéraires imbriqués

Voici un exemple de base montrant comment définir une route parent et des routes imbriquées :

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

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

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

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

export default App;

Explication :

• Le composant Dashboard est la route parent qui restitue les liens de navigation et la composant. Le sert d'espace réservé où les composants de l'itinéraire enfant seront rendus.
• Les composants Profil et Paramètres sont les itinéraires imbriqués à l'intérieur du tableau de bord.
• Les composants Lien sont utilisés pour la navigation et, lorsque vous cliquez dessus, ils mettront à jour l'URL et afficheront les composants imbriqués respectifs (par exemple, /dashboard/profile ou /dashboard/settings).
• Les composants Routes et Route à l'intérieur du tableau de bord définissent les routes imbriquées, garantissant que lorsque l'URL correspond à /dashboard/profile ou /dashboard/settings, les composants appropriés sont rendus.

---

Routes imbriquées avec paramètres de chemin

Vous pouvez également créer des itinéraires imbriqués avec des paramètres dynamiques.

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

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

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

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

export default App;

Explication :

• Le composant Profile reçoit un paramètre dynamique de l'URL (/dashboard/profile/:id).
• Le hook useParams() est utilisé pour accéder au paramètre dynamique, dans ce cas, id.
• La route parent /dashboard a des routes enfants pour chaque profil, et lorsque l'URL change (par exemple, /dashboard/profile/1), le composant Profil affichera l'ID de l'utilisateur.

---

Gestion des routes imbriquées par défaut

React Router fournit un moyen de gérer les routes imbriquées par défaut. Si aucun itinéraire enfant spécifique ne correspond, vous pouvez afficher un composant par défaut.

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

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

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

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

export default App;

Explication :

• La route d'index est une route spéciale utilisée pour définir le composant par défaut lorsque la route parent correspond mais qu'aucun chemin enfant n'est fourni.
• Dans ce cas, /dashboard affichera le composant DashboardHome par défaut, mais si /dashboard/profile ou /dashboard/settings est accédé, le composant respectif sera affiché.

---

Conclusion

Les routes imbriquées dans React Router sont une fonctionnalité essentielle pour créer des interfaces utilisateur complexes avec des structures hiérarchiques. Ils vous permettent de diviser votre application en composants plus petits et gérables tout en gardant la navigation propre et dynamique. En utilisant le bouton composant, vous pouvez restituer les routes enfants à l'intérieur d'un composant parent et vous pouvez personnaliser davantage le routage avec des paramètres dynamiques, des routes par défaut et des structures d'URL imbriqué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!