Mon parcours React : jour 27

Réagir le routeur

Aujourd'hui, l'accent est mis sur la maîtrise de React Router, un outil clé pour créer une navigation transparente dans les applications React à page unique (SPA). Laissez-moi vous guider à travers mon parcours d'apprentissage et mes découvertes !

Ce que j'ai appris en créant la navigation avec React Router
1.Configuration et installation :
Pour commencer à utiliser React Router, j'ai installé la bibliothèque avec :

npm install react-router-dom

Ensuite, j'ai importé les modules nécessaires :

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

2.Création d'itinéraires :
J'ai créé des itinéraires à l'aide de createBrowserRouter, en définissant des chemins et en les reliant à des composants spécifiques.

Exemple :

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/profiles', element: <ProfilesPage /> },
  { path: '/profiles/:profileId', element: <ProfilePage /> },
]);

• URL dynamiques : le chemin de routage : '/profiles/:profileId' illustre le routage dynamique. Cela me permet de restituer une page de profil unique basée sur le profileId.
• Gestion des erreurs : l'ajout d'un errorElement garantit que les utilisateurs qui accèdent à des URL non valides voient une page 404 Not Found.

3.Gestion des erreurs 404 :
J'ai créé une page d'erreur personnalisée (NotFoundPage.jsx) à l'aide du composant Link de React Router :

<Link to="/">Home</Link>

Cela permet de revenir à la page d'accueil sans actualisation complète du navigateur, conservant ainsi l'expérience SPA.

4.Mapping dynamique des composants :
Dans ProfilesPage.jsx, j'ai utilisé la méthode map pour générer dynamiquement des liens pour chaque profil :

{profiles.map((profile) => (
  <Link key={profile} to={`/profiles/${profile}`}>
    Profile {profile}
  </Link>
))}

Cela le rend évolutif car de nouveaux profils peuvent être ajoutés sans réécrire le code.

5.Structure des pages :
Chaque page/composant répond à un objectif spécifique :

• Page d'accueil : affiche le contenu par défaut lorsque les utilisateurs visitent /.
• Page Profils : répertorie les liens vers des profils individuels.
• ProfilePage : affiche un espace réservé pour le contenu dynamique lié à un profil spécifique.
• NotFoundPage : gère les URL non valides, améliorant ainsi l'expérience utilisateur.

6.Éviter les actualisations de page complète :
J'ai appris qu'en utilisant le composant au lieu du La balise empêche les rechargements inutiles d’une page complète. Cela permet à l'application de rester rapide et réactive.

7.Rendu des vues imbriquées :
Avec React Router, je peux facilement restituer des composants ou des mises en page imbriqués en structurant efficacement mes itinéraires.

Pensées finales
React Router est un outil essentiel pour créer des SPA riches et conviviaux. Sa capacité à effectuer un itinéraire dynamique, à gérer les erreurs avec élégance et à garantir une expérience de navigation fluide est puissante.

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!