Comment utiliser 3 crochets React populaires avec le routeur React
React Router est une bibliothèque de routage pour les applications React. Il utilise des crochets React, tels que useNavigate(), useParams() et useLocation(), pour permettre aux développeurs d’accéder aux informations de routage et d’effectuer la navigation dans leurs composants. Dans cet article, nous expliquerons comment ces crochets peuvent être utilisés.
React Router est une bibliothèque de routage spécialement conçue pour être utilisée dans les applications React. C’est un choix populaire parmi la communauté React en raison de sa flexibilité et de son ensemble de fonctionnalités robustes.
Avec React Router, les développeurs peuvent facilement créer des applications complexes à multiples facettes avec plusieurs composants qui couvrent plusieurs vues et URL. De plus, React Router fournit une gamme de fonctionnalités qui facilitent la gestion de choses telles que correspondance d’itinéraire, la navigation et le gestion de l’état de l’application.
Les dernières versions de React Router exploitent fortement React Hooks pour faciliter l’accès aux informations sur l’état du routeur et faciliter la navigation. Dans cet article, nous verrons comment l’utilisation des crochets joue un rôle important avec React Router en expliquant comment les trois crochets React les plus couramment utilisés peuvent être utilisés :
useNavigate()
useParams()
useLocation()
Avant de commencer, nous allons d’abord passer quelques secondes à discuter de ce qu’est le routage dans le contexte des applications Web.
Qu’est-ce que le routage ?
Le routage fait référence au processus consistant à diriger les utilisateurs vers le contenu ou les pages appropriés au sein d’une application Web. Dans une application Web, le routage est généralement effectué via l’utilisation d’URL et de requêtes HTTP.
Lorsqu’un utilisateur navigue vers une URL spécifique dans l’application, le système de routage détermine quel contenu ou quelle page doit être affiché en fonction de l’URL. Cela contribue à créer une expérience utilisateur transparente en permettant aux utilisateurs d’accéder facilement aux différentes pages et fonctionnalités de l’application et de les parcourir. Le routage est un composant essentiel des applications Web modernes et est souvent mis en œuvre à l’aide de bibliothèques ou de frameworks spécialisés tels que Réagir Routeur.
Voyons quelques exemples de la façon dont React Router fournit des utilitaires/fonctions utiles (c’est-à-dire des crochets) pour gérer le routage dans nos composants React.
Crochet useNavigate()
Le useNavigate() hook peut aider à déclencher un événement de navigation à partir d’un composant. En d’autres termes, le useNavigate() crochet vous permet de par programmation accédez à une URL différente dans un composant fonctionnel.
Le useNavigate() crochet peut être utilisé pour récupérer le navigate() fonction qui peut être appelée pour déclencher un événement de navigation. Voici un exemple de useNavigate() crochet utilisé pour rediriger un utilisateur vers un autre chemin après avoir cliqué sur un bouton dans un composant.
constHome=()=>{const navigate =useNavigate();constnavigateToNewPage=()=>{navigate("/new-page");};return(<button onClick={()=>navigateToNewPage()}>
Navigate to /new-page route
</button>);};
Dans l’exemple ci-dessus, lorsqu’il clique sur le bouton, l’utilisateur est dirigé par programme vers le /new-page itinéraire.
Note: Depuis la dernière version de React Router, la documentation de React Router encourage l’utilisation d’une autre fonction utilitaire, étiquetée réorienter()pour faciliter également la navigation par programmation.
crochet useParams()
Le useParams() crochet peut être utilisé pour accéder aux paramètres URL d’une Route.
Dans les applications Web, les paramètres d’URL sont souvent la partie de l’URL qui fait référence à l’information/ressource spécifique qui doit être récupérée lorsque la page doit être affichée. A titre d’exemple, dans le Progrès Telerik application web, l’itinéraire de telerik.com/blogs/author/:userId nous aide à nous diriger vers la page de profil d’un certain utilisateur où le paramètre d’URL dynamique est le userId du parcours. Si nous devions naviguer vers telerik.com/blogs/author/hassan-djirdehnous verrons ma page de profil s’afficher.
Comment se passe ce qui précède ? En effet, la page récupère les informations en fonction de la valeur du paramètre dynamique userId paramètre!
Le useParams() hook facilite l’accès aux paramètres d’une URL. Supposons que nous ayons un composant parent qui utilise React Router <Route /> composant pour rendre un composant étiqueté <Home />. Ce <Home /> composant est rendu sous le nom de chemin de /:id où id est un paramètre d’URL dynamique.
Dans le <Home /> composant, nous pouvons utiliser le useParams() hook pour détruire la valeur du id paramètre à fournir.
constHome=()=>{const{ id }=useParams();return<div>The value of the id URL parameter is {id}</div>;};
Si nous devions avoir les paramètres de notre URL être /hassan-djirdehle <Home /> composant sera rendu et le id la valeur du paramètre sera égale à hassan-djirdeh.
Avec le id paramètre à notre disposition dans le <Home /> composant, nous pourrions faire une requête réseau à une API, fournir la valeur du id paramètre qu’il attend et récupère les données que nous voudrions ensuite afficher dans le composant.
useLocation Hook
L’objet de localisation, dans le contexte de React Router, fournit des informations sur l’URL actuelle à tout moment. Voici un composant qui utilise le useLocation() crochet pour récupérer et accéder aux informations dans le location objet.
Dans ce qui précède, nous pouvons accéder au pathname, search et hash valeurs de l’emplacement de l’URL dans le balisage du composant. Si nous utilisons l’URL ci-dessous comme exemple :
Et puisque notre composant rend ces valeurs, notre balisage de composant ressemblera à ceci :
pathname fait référence au chemin de l’URL visité. / indique le chemin dans le chemin d’index.
search fait référence aux paramètres de requête de recherche utilisés dans l’URL. Ci-dessus, les paramètres de requête de recherche sont ?key1=value1&key2=value2.
hash fait référence à toutes les valeurs de hachage ajoutées à l’URL. Dans l’exemple ci-dessus, #section1 est la valeur de hachage.
Accéder à ces valeurs dans notre composant, à l’aide du useLocation() hook, peut être utile lorsque nous voulons peut-être utiliser certaines valeurs dans notre URL pour récupérer des données, afficher l’URL actuelle dans notre composant, ou même effectuer certains effets secondaires chaque fois que l’emplacement de l’URL actuelle change (par exemple, des événements de suivi d’incendie).
Conclure
Réagir Routeur useNavigate(), useParams() et useLocation() les crochets fournissent des fonctionnalités utiles pour accéder aux fonctionnalités liées au routage dans nos composants React, y compris la navigation vers différentes routes, l’accès aux paramètres de route et l’accès au location objet.
Bien que ce soient quelques-uns des principaux crochets que l’on peut utiliser dans leur application React, React Router fournit de nombreux autres crochets qui offrent également d’autres fonctionnalités. Nous en reparlerons dans un prochain article !
juin 6, 2023
Comment utiliser 3 crochets React populaires avec le routeur React
React Router est une bibliothèque de routage pour les applications React. Il utilise des crochets React, tels que useNavigate(), useParams() et useLocation(), pour permettre aux développeurs d’accéder aux informations de routage et d’effectuer la navigation dans leurs composants. Dans cet article, nous expliquerons comment ces crochets peuvent être utilisés.
React Router est une bibliothèque de routage spécialement conçue pour être utilisée dans les applications React. C’est un choix populaire parmi la communauté React en raison de sa flexibilité et de son ensemble de fonctionnalités robustes.
Avec React Router, les développeurs peuvent facilement créer des applications complexes à multiples facettes avec plusieurs composants qui couvrent plusieurs vues et URL. De plus, React Router fournit une gamme de fonctionnalités qui facilitent la gestion de choses telles que correspondance d’itinéraire,
la navigation et le gestion de l’état de l’application.
Les dernières versions de React Router exploitent fortement React Hooks pour faciliter l’accès aux informations sur l’état du routeur et faciliter la navigation. Dans cet article, nous verrons comment l’utilisation des crochets joue un rôle important avec React Router en expliquant comment les trois crochets React les plus couramment utilisés peuvent être utilisés :
useNavigate()
useParams()
useLocation()
Avant de commencer, nous allons d’abord passer quelques secondes à discuter de ce qu’est le routage dans le contexte des applications Web.
Qu’est-ce que le routage ?
Le routage fait référence au processus consistant à diriger les utilisateurs vers le contenu ou les pages appropriés au sein d’une application Web. Dans une application Web, le routage est généralement effectué via l’utilisation d’URL et de requêtes HTTP.
Lorsqu’un utilisateur navigue vers une URL spécifique dans l’application, le système de routage détermine quel contenu ou quelle page doit être affiché en fonction de l’URL. Cela contribue à créer une expérience utilisateur transparente en permettant aux utilisateurs d’accéder facilement aux différentes pages et fonctionnalités de l’application et de les parcourir. Le routage est un composant essentiel des applications Web modernes et est souvent mis en œuvre à l’aide de bibliothèques ou de frameworks spécialisés tels que Réagir Routeur.
Voyons quelques exemples de la façon dont React Router fournit des utilitaires/fonctions utiles (c’est-à-dire des crochets) pour gérer le routage dans nos composants React.
Crochet useNavigate()
Le
useNavigate()
hook peut aider à déclencher un événement de navigation à partir d’un composant. En d’autres termes, leuseNavigate()
crochet vous permet de par programmation accédez à une URL différente dans un composant fonctionnel.Le
useNavigate()
crochet peut être utilisé pour récupérer lenavigate()
fonction qui peut être appelée pour déclencher un événement de navigation. Voici un exemple deuseNavigate()
crochet utilisé pour rediriger un utilisateur vers un autre chemin après avoir cliqué sur un bouton dans un composant.Dans l’exemple ci-dessus, lorsqu’il clique sur le bouton, l’utilisateur est dirigé par programme vers le
/new-page
itinéraire.crochet useParams()
Le useParams() crochet peut être utilisé pour accéder aux paramètres URL d’une Route.
Dans les applications Web, les paramètres d’URL sont souvent la partie de l’URL qui fait référence à l’information/ressource spécifique qui doit être récupérée lorsque la page doit être affichée. A titre d’exemple, dans le Progrès Telerik application web, l’itinéraire de
telerik.com/blogs/author/:userId
nous aide à nous diriger vers la page de profil d’un certain utilisateur où le paramètre d’URL dynamique est leuserId
du parcours. Si nous devions naviguer vers telerik.com/blogs/author/hassan-djirdehnous verrons ma page de profil s’afficher.Comment se passe ce qui précède ? En effet, la page récupère les informations en fonction de la valeur du paramètre dynamique
userId
paramètre!Le
useParams()
hook facilite l’accès aux paramètres d’une URL. Supposons que nous ayons un composant parent qui utilise React Router<Route />
composant pour rendre un composant étiqueté<Home />
. Ce<Home />
composant est rendu sous le nom de chemin de/:id
oùid
est un paramètre d’URL dynamique.Dans le
<Home />
composant, nous pouvons utiliser leuseParams()
hook pour détruire la valeur duid
paramètre à fournir.Si nous devions avoir les paramètres de notre URL être
/hassan-djirdeh
le<Home />
composant sera rendu et leid
la valeur du paramètre sera égale àhassan-djirdeh
.Avec le
id
paramètre à notre disposition dans le<Home />
composant, nous pourrions faire une requête réseau à une API, fournir la valeur duid
paramètre qu’il attend et récupère les données que nous voudrions ensuite afficher dans le composant.useLocation Hook
L’objet de localisation, dans le contexte de React Router, fournit des informations sur l’URL actuelle à tout moment. Voici un composant qui utilise le useLocation() crochet pour récupérer et accéder aux informations dans le
location
objet.Dans ce qui précède, nous pouvons accéder au
pathname
,search
ethash
valeurs de l’emplacement de l’URL dans le balisage du composant. Si nous utilisons l’URL ci-dessous comme exemple :Le
location
l’objet sera rempli comme suit :Et puisque notre composant rend ces valeurs, notre balisage de composant ressemblera à ceci :
pathname
fait référence au chemin de l’URL visité./
indique le chemin dans le chemin d’index.search
fait référence aux paramètres de requête de recherche utilisés dans l’URL. Ci-dessus, les paramètres de requête de recherche sont?key1=value1&key2=value2
.hash
fait référence à toutes les valeurs de hachage ajoutées à l’URL. Dans l’exemple ci-dessus,#section1
est la valeur de hachage.Accéder à ces valeurs dans notre composant, à l’aide du
useLocation()
hook, peut être utile lorsque nous voulons peut-être utiliser certaines valeurs dans notre URL pour récupérer des données, afficher l’URL actuelle dans notre composant, ou même effectuer certains effets secondaires chaque fois que l’emplacement de l’URL actuelle change (par exemple, des événements de suivi d’incendie).Conclure
Réagir Routeur
useNavigate()
,useParams()
etuseLocation()
les crochets fournissent des fonctionnalités utiles pour accéder aux fonctionnalités liées au routage dans nos composants React, y compris la navigation vers différentes routes, l’accès aux paramètres de route et l’accès aulocation
objet.Bien que ce soient quelques-uns des principaux crochets que l’on peut utiliser dans leur application React, React Router fournit de nombreux autres crochets qui offrent également d’autres fonctionnalités. Nous en reparlerons dans un prochain article !
Source link
Partager :
Articles similaires