Comprendre React Outlet avec un routage approprié

Cet article explorera le fonctionnement des prises React et les principes fondamentaux du routage dans les applications React. Avant tout, nous devons comprendre les bases du routage

Comprendre les bases

Avant de plonger dans ce sujet, assurons-nous d'avoir une solide compréhension de React Router.

• Qu'est-ce qu'un React Router ? React Router est une bibliothèque JavaScript populaire qui permet la navigation entre différentes vues dans une application React. Il vous permet de définir des itinéraires qui mappent les URL à des composants spécifiques. Plus..

• Pourquoi le routage est-il important ? Le routage est essentiel pour créer des applications à page unique (SPA) dans lesquelles l'utilisateur peut naviguer sans rechargement de page complète, créant ainsi une expérience plus fluide et plus dynamique.

Plongeons maintenant dans React Outlet

Qu’est-ce que React Outlet ?

Le Le composant est un espace réservé dans le composant d'une route parent qui indique à React Router où restituer les routes enfants. Il agit comme un conteneur dynamique qui modifie son contenu en fonction de l'URL actuelle.
Cette fonctionnalité permet de gérer des mises en page complexes où une partie de la page reste cohérente, comme les en-têtes ou les barres latérales, tandis que d'autres parties changent dynamiquement en fonction de l'itinéraire.

Comment ça marche : Lorsque l'URL correspond à une route parent, le routeur React recherche un au sein du composant de ce parent. Il restitue ensuite le composant de la route enfant correspondante dans ce .

Implémentons l'Outlet avec un routage de réaction approprié pour l'application React

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Ce composant AllRoutes définit un système de routage pour une application React utilisant réagir-router-dom, qui gère la navigation entre différentes pages dans une application Web React. Voici une ventilation détaillée du code

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Importation de packages

BrowserRouter : Ce composant permet le routage dans le navigateur. Il utilise l'API d'historique HTML5 pour maintenir l'interface utilisateur synchronisée avec l'URL.
Outlet, Route, Routes : Ces composants définissent et gèrent les différents itinéraires (ou pages) de l'application.
Suspense : Suspense est utilisé pour gérer les composants chargés paresseusement. Il affiche un composant de secours (dans ce cas, un chargeur personnalisé) pendant le chargement du composant.
paresseux : cette fonction permet le fractionnement du code en chargeant paresseusement les composants uniquement lorsqu'ils sont nécessaires, améliorant ainsi les performances de l'application en réduisant la taille initiale du bundle.
Chargeur : il s'agit d'un composant personnalisé qui affiche un indicateur de chargement pendant que les composants sont chargés paresseusement.
ProtectedRoute : ce composant personnalisé garantit que certains itinéraires ne sont accessibles qu'aux utilisateurs autorisés, renforçant ainsi la sécurité.
Root Route (/) : Cette route concerne le chemin racine de notre application. Il restitue le composant de connexion.

Importer des chemins d'itinéraire

L'application importe des chemins prédéfinis (par exemple, tableau de bord, homePath, loginPath, rootPath) à partir d'un fichier séparé (routePaths). Cela rend le code plus facile à maintenir et évite les chemins de routage de codage en dur au sein des composants.

Définition d'itinéraires dans le composant AllRoutes

La fonction principale, AllRoutesComponent, définit la façon dont les différents itinéraires de l'application sont gérés :
 : enveloppe la structure de routage et gère la navigation dans le navigateur.
 : Ce composant contient tous les itinéraires définis de l'application.
 : définit un seul itinéraire. La prop path définit le modèle d'URL et la prop element spécifie le composant à restituer pour cet itinéraire.

• La route racine (rootPath) sert de conteneur pour les routes enfants.

• La route d'index restitue le LoginComponent par défaut lorsque l'utilisateur visite le chemin /.

• Le chemin /login restitue également le LoginComponent.

• Les routes comme /home et /dashboard sont enveloppées dans un composant ProtectedRoute, garantissant que seuls les utilisateurs autorisés peuvent accéder à ces pages.

 : Ceci permet le rendu des itinéraires imbriqués. Toutes les routes enfants (comme /login, /home) sont rendues à l'intérieur de la route parent (rootPath).

Que sont les itinéraires protégés ?

Certaines routes (comme homePath et Dashboard) sont imbriquées dans un élément ProtectedRoute. Cela signifie que les utilisateurs doivent remplir certaines conditions (comme être connectés) pour accéder à ces pages. Si un utilisateur n'est pas autorisé, le composant ProtectedRoute le redirige généralement vers la page de connexion ou une page d'erreur.
Voici le code de l'itinéraire protégé

// import packages

import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import React, { Suspense, lazy } from "react";
import {
  dashboard,
  homePath,
  loginPath,
  rootPath
} from "./routePaths";

import Loader from "../components/loader";
import ProtectedRoute from "./protectedRoute";

// import route paths

const LoginComponent = lazy(() => import("../pages/login"));
const HomeComponent = lazy(() => import("../pages/home"));
const RouteNotFoundComponent = lazy(() => import("../pages/pageNotFound"));

const DashboardComponent = lazy(() => import("../pages/dashboard/"));

const AllRoutesComponent = () => {
  return (
    <Suspense fallback={<Loader />}>
      <BrowserRouter>
        <Routes>
          <Route path={rootPath} element={<Outlet />}>
            <Route index element={<LoginComponent />} />
            <Route path={loginPath} element={<LoginComponent />} />
            <Route element={<ProtectedRoute />}>
              <Route path={homePath} element={<HomeComponent />} />
              <Route path={dashboard} element={<DashboardComponent />} />
            </Route>
            <Route path="*" element={<RouteNotFoundComponent />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default AllRoutesComponent;

Explication sur le code

• Importation de packages

React, { useEffect } : React est le package de base pour la création de l'interface utilisateur, et useEffect est un hook qui exécute des effets secondaires dans les composants fonctionnels. Ici, useEffect est utilisé pour gérer la redirection si l'utilisateur n'est pas authentifié.
useNavigate : ce hook de react-router-dom permet la navigation par programmation. Il est utilisé pour rediriger les utilisateurs lorsqu'ils ne sont pas authentifiés.
Outlet : Il s'agit d'un espace réservé pour les itinéraires imbriqués à l'intérieur de l'itinéraire protégé. Il permet le rendu dynamique des routes enfants.
BaseLayout : ce composant enveloppe l'itinéraire protégé avec une mise en page, offrant une apparence et une structure cohérentes pour les pages protégées.

• Définition des composants

useNavigate() : Ce hook permet de naviguer vers différents itinéraires. Dans ce cas, il est utilisé pour accéder à rootPath si l'utilisateur n'est pas authentifié.
isAuthenticated et user : ces valeurs sont codées en dur pour l'instant mais peuvent être définies dynamiquement, généralement en vérifiant un état d'authentification (comme un jeton JWT, des données de session, etc.) à partir d'un état global ou d'un contexte.
isAuthenticated : un indicateur qui détermine si l'utilisateur est authentifié. Si faux, l'utilisateur est redirigé.
user : l'utilisateur actuellement connecté. Cette valeur peut être récupérée dynamiquement à partir d'un contexte ou d'un état global, mais pour l'instant, il s'agit d'une chaîne codée en dur (« shruti »).

useEffect : le hook useEffect s'exécute chaque fois qu'il est authentifié ou navigue dans les modifications.
Dans useEffect, le code vérifie si l'utilisateur est authentifié. Sinon (! est authentifié), l'utilisateur est redirigé vers le chemin racine à l'aide de la fonction de navigation.
L'option { replace: true } empêche l'ajout de la redirection à l'historique du navigateur, ce qui signifie que l'utilisateur ne pourra pas revenir à la page protégée.

Plongeons maintenant dans le code du composant BaseLayout

import React from "react";

// import components
import AllRoutes from "./routes";

// component
const App = () => {
  return (
    <>

      <AllRoutes />
    </>
  );
};
export default App;

Le composant BaseLayout sert de structure de mise en page commune pour toutes les pages de notre application.
Il contient des éléments communs comme une barre latérale et une zone de contenu principale.
Les composants enfants de différentes routes sont rendus à l'aide du composant Outlet dans la zone de contenu principale.

Essayez cet article pour implémenter le routage de chargement paresseux avec la sortie du routeur

Conclusion

Le routage de chargement paresseux avec Outlet dans React est un moyen puissant d'optimiser les performances en réduisant le temps de chargement initial de votre application. En utilisant React.lazy() et Suspense, vous vous assurez que les composants sont chargés uniquement en cas de besoin, tandis que le composant Outlet permet un routage imbriqué efficace. Combinée à l'utilisation de routes protégées, cette approche fournit une structure modulaire, évolutive et performante pour gérer les routes dans votre application.

C'est ça!

Essayez-le et dites-moi ce que vous en pensez dans les commentaires !

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!