Implémentation de routes imbriquées avec React Router 6 / Blogs / Perficient

Dans React Router version 6, l’imbrication des routes est un moyen simple d’afficher plusieurs composants dans la même mise en page en fonction du chemin de l’URL. Cette fonctionnalité est particulièrement utile pour les applications dans lesquelles vous souhaitez afficher différentes sections de contenu sans quitter la page actuelle. Il est idéal pour les scénarios tels que les forums, les blogs ou les tableaux de bord, dans lesquels les utilisateurs peuvent explorer différents niveaux de contenu tout en conservant la même structure globale de page.

Étape 1 : routage de base

Application React en utilisant React-Router-Dom. Il définit trois routes : le composant Home pour l’URL racine (/), le composant Posts pour /posts et le composant About pour /about. Le composant entoure les itinéraires pour permettre la navigation, et le composant gère la correspondance des URL avec les composants respectifs.

app.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import About from './components/about.js';
import Posts from './components/posts.js';
import Home from './components/home.js';
import './App.css';

function App() {
  return (
    <div className="App">
        <Router>
           <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/posts" element={<Posts />} >
                <Route path="/about" element={<About />} />
            </Routes>
        </Router>
    </div>
  );
}

export default App;

Dans l’application ci-dessus, les itinéraires définis sont :

• « / »
• « /messages »
• « /à propos de »

Notez que dans React Router 6, vous n’avez pas besoin de préfixer les chemins avec une barre oblique (« / ») dans les accessoires de chemin. Par exemple, au lieu d’écrire « /about », vous utilisez simplement « about ». La barre oblique de début est automatiquement implicite.

Étape 2 : routage imbriqué

http://localhost:3000/posts/

La configuration d’itinéraires imbriqués est simple ! Voici comment procéder :

app.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import About from './components/about.js';
import Posts from './components/posts.js';
import Home from './components/home.js';
import NewPostCreate from './components/newpostcreate.js';
import SinglePost from './components/singlepost'; 
import './App.css';

function App() {
  return (
    <div className="App">
        <Router>
           <Routes>
                <Route path="/" element={<Home />} />
                <Route path="posts" element={<Posts />} >
                       <Route path="newpostcreate" element={<NewPostCreate />} /> {/* Nested route for creating a post */}
                       <Route path=":postId" element={<SinglePost />} /> {/* Nested route for viewing a single post */}
                </Route>
                <Route path="about" element={<About />} />
            </Routes>
        </Router>
    </div>
  );
}

export default App;

Dans un composant , vous pouvez placer des composants supplémentaires pour définir des itinéraires imbriqués. Voici à quoi ressemblerait la structure :

• « / »
• « /à propos de »
• « /messages »
• « /posts/newpostcreate »
• « /posts/123 »

Avec cette configuration, les routes imbriquées peuvent partager des données et effectuer un rendu de manière hiérarchique. Nous pouvons désormais explorer comment ces routes imbriquées transmettent des informations entre elles et garantissent un affichage correct dans leurs contextes imbriqués.

Étape 3 : Imbriquer les itinéraires avec

http://localhost:3000/posts/newpostcreate

Lorsque vous visitez http://localhost:3000/posts/newpostcreate, vous verrez les composants parent et enfant. Cela se produit en raison des itinéraires imbriqués : vous pouvez afficher plusieurs composants sous un seul itinéraire.

Cependant, si le composant < NewPostCreate/> n’apparaît pas, c’est que le composant parent doit inclure un . Le est une fonctionnalité de React Router utilisée pour restituer les composants enfants au sein d’un composant parent.

Par exemple, votre composant Posts pourrait ressembler à ceci :

messages.js

import { Outlet } from "react-router-dom";
import React from 'react'; 

export default function Posts() {
  const [currentUser] = React.useState("Faizan Ali")

    return (
        <div>
            <h1>List of posts go here!</h1>
            <Outlet context={[currentUser]}/>
        </div>
    )
}

Le composant dans React Router fonctionne de la même manière que props.children dans React standard. Il agit comme un espace réservé pour afficher les itinéraires enfants imbriqués dans l’itinéraire principal.

Vous pourriez être curieux de savoir comment transférer des données d’une route parent vers sa route enfant. Dans React Router 6, le composant possède un accessoire de contexte intégré. Ce contexte est essentiellement un fournisseur de contexte React et il vous permet de transmettre un tableau d’états ou de valeurs aux composants enfants rendus à l’intérieur du point de vente.

newpostcreate.js

import { useOutletContext } from "react-router-dom";
import React from 'react'; 

export default function NewPostCreate() {
  const [currentUser] = useOutletContext()

    return (
        <div>
            <h1>Welcome {currentUser}, write a new post!</h1>
         <form/>
        </div>
    )
}

Le composant dans React Router fonctionne de la même manière que props.children dans React standard. Il fonctionne comme un espace réservé qui permet d’afficher les routes enfants imbriquées dans la route parent.

Vous vous demandez peut-être comment transférer des données d’une route parent vers une route enfant. Dans React Router 6, le composant possède un accessoire de contexte intégré. Ce contexte est essentiellement un fournisseur de contexte React et il vous permet de transmettre un tableau d’états ou de valeurs aux composants enfants rendus à l’intérieur du point de vente.

Sortir:

http://localhost:3000/messages/

http://localhost:3000/posts/NouveauPostCréer

Pour utiliser avec le contexte :

• Le parent doit importer Outlet.
• Le composant parent doit inclure le avec un contexte, tel que [state]lors du rendu.
• L’enfant doit importer useOutletContext.
• L’enfant doit déstructurer le tableau avec useOutletContext(). L’ordre est important dans ce cas, contrairement à la déstructuration des accessoires et des objets, où l’ordre n’affecte pas le résultat.

Passons maintenant à la prochaine route imbriquée, :postId.

Étape 4 : Routes imbriquées et useParams

http://localhost:3000/posts/123

singlepost.js

import { useParams } from "react-router-dom"

function SinglePost() {

    let params = useParams()

    return <h1>{params.postId}</h1>
}
export default SinglePost;

• Pour afficher un post spécifique dans /posts/123, nous définissons une route avec un paramètre dynamique, représenté par les deux points : dans le chemin :} />
• Ensuite, utilisez useParams à l’intérieur du composant pour récupérer les paramètres de route :let params = useParams();
• Désormais, vous pouvez accéder à l’ID de publication (comme 123 ou toute autre valeur transmise dans l’URL) en référençant params.postId dans votre composant.

Sortir:

http://localhost:3000/posts/123

En conclusion, React Router 6 simplifie les itinéraires d’imbrication, permettant une navigation hiérarchique efficace. Utiliser des composants comme <Outlet /> et useParamsles développeurs peuvent créer facilement des applications dynamiques et interactives, tout en partageant des données entre les routes parent et enfant. Cela en fait un excellent choix pour créer des expériences utilisateur complexes et transparentes.