Accès aux paramètres de route dynamique avec le hook useParams dans React

useParams Hook dans React

Le hook useParams fait partie de React Router et est utilisé pour accéder aux paramètres dynamiques à partir de l'URL actuelle. Ce hook est principalement utile lorsque vous avez des itinéraires avec des segments dynamiques, tels que des ID utilisateur, des ID de produit ou d'autres données variables intégrées dans le chemin d'itinéraire.

Par exemple, si vous créez un blog et souhaitez afficher une publication spécifique en fonction de son identifiant, vous utiliserez useParams pour récupérer l'ID de la publication à partir de l'URL et afficher la publication correspondante.

---

Comment fonctionne useParams

• useParams renvoie un objet contenant des paires clé-valeur de paramètres dynamiques de l'itinéraire actuel.
• Les clés de l'objet correspondent aux noms des paramètres de l'itinéraire (spécifiés dans le chemin de l'itinéraire) et les valeurs sont les valeurs réelles de l'URL.

Syntaxe :

const params = useParams();

Retours :

• Un objet avec des paires clé-valeur, où la clé est le nom du paramètre et la valeur est la valeur du paramètre provenant de l'URL.

---

Exemple 1 : Utilisation de base de useParams

Disons que vous disposez d'un itinéraire pour afficher un profil utilisateur, où l'itinéraire est /profile/:userId et :userId est un segment dynamique.

Étape 1 : Définir un itinéraire avec un paramètre dynamique

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

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

export default App;

Étape 2 : utilisez useParams pour extraire l'ID utilisateur

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

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

  return (
    <div>
      <h2>User Profile</h2>
      <p>Displaying details for user with ID: {userId}</p>
    </div>
  );
};

export default UserProfile;

Explication :

• Lorsque l'URL est /profile/123, le hook useParams renverra { userId: '123' }.
• Le userId est ensuite utilisé pour afficher des informations spécifiques à cet utilisateur dans le composant UserProfile.

---

Exemple 2 : Utilisation de plusieurs paramètres

Vous pouvez avoir plusieurs paramètres dynamiques dans l'itinéraire, et useParams les renverra tous.

Étape 1 : Définir un itinéraire avec plusieurs paramètres dynamiques

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/post/:postId/comment/:commentId" element={<PostDetail />} />
      </Routes>
    </Router>
  );
};

export default App;

Étape 2 : utilisez useParams pour extraire plusieurs paramètres

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

const PostDetail = () => {
  const { postId, commentId } = useParams(); // Extracts postId and commentId from the URL

  return (
    <div>
      <h2>Post Details</h2>
      <p>Post ID: {postId}</p>
      <p>Comment ID: {commentId}</p>
    </div>
  );
};

export default PostDetail;

Explication :

• Lorsque l'URL est /post/456/comment/789, le hook useParams renverra { postId : '456', commentId : '789' }.
• Le composant affiche ensuite l'ID de publication et l'ID de commentaire en fonction des paramètres d'URL.

---

Exemple 3 : Utilisation de useParams avec des paramètres facultatifs

Vous pouvez également gérer des paramètres facultatifs en définissant un itinéraire avec un paramètre qui peut être éventuellement inclus.

Étape 1 : Définir un itinéraire avec des paramètres facultatifs

const params = useParams();

Étape 2 : Gérer le paramètre facultatif dans useParams

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

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

export default App;

Explication :

• Dans ce cas, le paramètre de requête est facultatif (indiqué par le ? dans la route).
• Si l'URL est /search/books, useParams renverra { query: 'books' }.
• Si l'URL est /search, useParams renverra {} (c'est-à-dire aucune requête) et le message « Afficher tous les résultats » s'affichera.

---

Quand utiliser useParams

• Routages dynamiques : lorsque vous disposez d'une structure d'URL qui inclut des segments dynamiques (par exemple, /users/:userId, /products/:productId).
• Récupération de données : lorsque vous devez récupérer des données en fonction des valeurs dynamiques de l'URL (par exemple, récupérer le profil d'un utilisateur, les détails d'un produit ou un article de blog par ID).
• Routes imbriquées : dans les scénarios où les routes imbriquées ont des paramètres dynamiques et où vous devez extraire les valeurs de l'URL.

---

Limitations de useParams

• State Not Persisted : useParams récupère uniquement les paramètres de l'URL. Il ne les stocke ni ne les préserve après un changement d'itinéraire. Si vous avez besoin de garder une trace des paramètres, vous devrez peut-être utiliser la gestion d'état ou d'autres hooks (par exemple, useState, useEffect).
• Aucun paramètre de requête : si vous devez lire les paramètres de requête (par exemple, ?sort=asc), utilisez le hook useLocation au lieu de useParams.

---

Conclusion

Le hook useParams est un moyen simple et efficace d'accéder aux paramètres dynamiques à partir de l'URL dans vos composants React. Il facilite grandement le travail avec des itinéraires dynamiques et vous permet de créer des applications plus flexibles et dynamiques.

---

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!