Comprendre les vFeatures, la configuration et les meilleures pratiques de React Router

React Router v6 : un guide complet

React Router est la bibliothèque la plus populaire utilisée pour le routage dans les applications React. Il vous permet de naviguer entre différents composants en fonction de l'URL, offrant ainsi une expérience d'application monopage (SPA) dans laquelle le contenu est mis à jour sans recharger la page entière. React Router v6 est la dernière version majeure et introduit une série d'améliorations, de simplifications et de nouvelles fonctionnalités par rapport aux versions précédentes.

---

Principales fonctionnalités et modifications de React Router v6

1. API simplifiée

   • React Router v6 introduit une API plus simple et plus intuitive pour définir les itinéraires et la navigation, éliminant ainsi le besoin de nombreuses solutions de contournement présentes dans la v5.

2. Élément d'itinéraire (élément)

   • Dans la v6, les routes utilisent désormais le prop element au lieu du composant ou du prop render. Cela vous permet de passer directement le composant à rendre.
   • Ancien (v5) : composant={ComponentName}
   • Nouveau (v6) : element={}

3. Correspondance d'itinéraire

   • La correspondance d'itinéraire est désormais plus intuitive. Dans la v6, les routes correspondent exactement, ce qui signifie que la meilleure correspondance est choisie, et elle ne nécessite plus de route « fourre-tout » pour gérer les segments dynamiques.
   • Le Le composant est remplacé par et il est utilisé pour afficher uniquement le premier itinéraire qui correspond à l'URL.

4. Itinéraires imbriqués

   • React Router v6 facilite la définition de routes imbriquées. Au lieu d'utiliser le rendu ou les enfants pour l'imbrication, vous pouvez désormais définir directement des itinéraires imbriqués à l'aide de l'élément prop.

5. Pas plus précis

   • Dans React Router v6, toutes les routes correspondent exactement par défaut, il n'est donc pas nécessaire d'utiliser l'accessoire exact pour spécifier la correspondance exacte.

6. Crochets de routeur React

   • React Router v6 a mis à jour les hooks pour correspondre à sa nouvelle architecture, notamment useNavigate, useParams, useLocation, useMatch et useNavigate.

---

Comment configurer React Router v6

Pour démarrer avec React Router v6, suivez ces étapes :

1. Installez React Router v6

Vous pouvez installer React Router v6 en utilisant npm ou Yarn.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2. Définir des itinéraires et des composants

Regardons un exemple de la façon de configurer le routage de base dans React Router v6.

Étape 1 : Définir le composant principal de l'application

npm install react-router-dom@6
# or
yarn add react-router-dom@6

•  : Ceci remplace le composant des versions précédentes. Il garantit que seule la première route correspondante est rendue.
• } /> : Ceci définit un itinéraire pour la page d'accueil et restitue le composant Accueil.
•  : le caractère générique * est utilisé pour gérer les erreurs 404 ou les routes sans correspondance, rendant le composant NotFound lorsque l'URL ne correspond à aucune route.

Étape 2 : Créer des composants individuels

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>À propos de.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

Routage dynamique avec React Router v6

Pour gérer les itinéraires dynamiques, tels qu'une page de profil utilisateur où l'ID utilisateur fait partie de l'URL, React Router v6 fournit le hook useParams.

Étape 1 : Définir un itinéraire dynamique

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

Explication :

• :userId est un segment dynamique dans le chemin de la route. Le hook useParams vous permet d'accéder à la valeur de userId dans le composant UserProfile.
• Lorsque vous accédez à /user/123, le composant UserProfile restituera et affichera l'ID utilisateur sous la forme 123.

---

Routes imbriquées dans React Router v6

Les itinéraires imbriqués vous permettent de créer des mises en page complexes en définissant des sous-itinéraires au sein des itinéraires parents.

Étape 1 : Définir les itinéraires parent et enfant

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

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

Explication :

• Le composant Tableau de bord contient des itinéraires imbriqués pour la présentation et les paramètres.
• Le /* dans la route parent garantit que toutes les routes enfants sont gérées sous /dashboard.

---

Hooks du routeur React v6

React Router v6 introduit plusieurs hooks pour naviguer et accéder aux informations de routage :

1. useNavigate : naviguez par programmation vers différents itinéraires.
2. useParams : accédez aux paramètres d'URL dynamiques.
3. useLocation : obtenez des informations sur l'emplacement actuel (URL).
4. useMatch : fait correspondre l'URL actuelle à un itinéraire donné.
5. useResolvedPath : Résoudre un chemin vers une URL absolue.

Exemple : utilisezNavigate Hook

Le hook useNavigate permet la navigation programmatique au sein de votre application.

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

Bonnes pratiques de React Router v6

• Correspondance exacte par défaut : React Router v6 correspond exactement aux itinéraires par défaut, ce qui facilite la gestion de la correspondance d'itinéraire sans avoir besoin de spécifier exactement.
• Utiliser l'élément Prop : transmettez JSX directement à l'élément prop au lieu d'utiliser l'élément prop, ce qui simplifie votre code et réduit le besoin de fonctions de rendu.
• Routage imbriqué : utilisez des routes imbriquées pour créer des mises en page complexes avec des routes enfants, gardant ainsi votre code modulaire et maintenable.
• Gérer les 404 avec Wildcard Route : utilisez le caractère générique * pour détecter tous les itinéraires sans correspondance et afficher une page 404 ou rediriger les utilisateurs vers un itinéraire par défaut.

---

Conclusion

React Router v6 introduit plusieurs améliorations par rapport aux versions précédentes, notamment une API plus simple, une meilleure correspondance de routes et une prise en charge améliorée des routes dynamiques et imbriquées. En tirant parti de hooks tels que useNavigate, useParams et useLocation, vous pouvez créer des systèmes de routage puissants et flexibles dans vos applications React.

---

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!