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.

const Home = () => {
  
  const navigate = useNavigate();

  const navigateToNewPage = () => {
    
    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.

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/:id">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
};

Dans le <Home /> composant, nous pouvons utiliser le useParams() hook pour détruire la valeur du id paramètre à fournir.

const Home = () => {
  
  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.

const Home = () => {
  
  const location = useLocation();

  
  return (
    <div>
      <p>Current Pathname: {location.pathname}</p>
      <p>Current Search: {location.search}</p>
      <p>Current Hash: {location.hash}</p>
    </div>
  );
};

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 :

https://www.example.com/?key1=value1&key2=value2#section1

Le location l’objet sera rempli comme suit :

location = {
  pathname: "https://www.telerik.com/",
  search: "?key1=value1&key2=value2",
  hash: "#section1",
};

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 !