Explorer useLocation et useParams. / Blogs / Perficient

React fournit des outils puissants pour créer des applications Web dynamiques. Les deux hooks les plus importants pour gérer le routage et les URL sont useLocation et useParams. Dans cet article de blog, nous explorerons les fonctionnalités de ces hooks, discuterons de leur application avec des exemples et vous montrerons comment les combiner pour offrir une navigation fluide à vos projets React.

Comprendre useLocation

Le hook useLocation est fourni par React Router et permet aux composants d’accéder à des informations détaillées sur l’URL actuelle. Il renvoie un objet contenant diverses propriétés, chacune représentant un aspect différent de l’URL. Explorons chacune de ces propriétés :

chemin d’accès: représente le chemin actuel de l’URL.

recherche: représente les paramètres de chaîne de requête de l’URL.

hacher: représente la partie de hachage de l’URL.

État: représente toute information d’état associée à l’emplacement.

Explorer chaque propriété

Examinons maintenant chaque propriété renvoyée par useLocation et comprenons sa signification avec des exemples pratiques.

Accéder au chemin d’accès actuel

Le paramètre « chemin actuel » dans le utiliserEmplacement le crochet est représenté par le chemin d’accès propriété de l’objet de localisation. Il fournit des informations sur le chemin actuel de l’URL, qui correspond au parcours actuel de l’utilisateur. Ce paramètre est utile pour déterminer l’itinéraire actif et restituer les composants de manière conditionnelle en fonction du chemin de l’itinéraire.

Créons un exemple pour montrer comment utiliser le paramètre « chemin actuel » dans utiliserEmplacement:

import React from 'react';
import { useLocation } from 'react-router-dom';
 
const LocationInfo = () => {
  const location = useLocation();
 
  return (
    <div>
      <h1>Location Information</h1>
      <h3>Current Path: {location.pathname}</h3>
    </div>
  );
}
 
export default LocationInfo;

Dans cet exemple, nous importons utiliserEmplacement depuis réagir-routeur-dom et utilisez-le pour accéder à l’objet de localisation actuel. Nous affichons ensuite l’objet de localisation chemin d’accès propriété dans le JSX, qui représente le chemin actuel de l’URL.

Sortir:

Récupération des paramètres de requête

Le recherche paramètre dans le utiliserEmplacement hook représente les paramètres de chaîne de requête de l’URL.

What is a query parameter?

Une paire clé-valeur est incluse à la fin d’une URL et est appelée « paramètre de requête ». Il est généralement suivi de ? et séparé par &. Les informations circulent entre les pages via un paramètre de requête. Par exemple, dans l’URL

http://website.com/articles?category=technology&sort=datele paramètre de recherche est ? catégorie=technologie&sort=date. Ici, catégorie et trier sont les paramètres de la requête et leurs valeurs sont technologie et date.

Créons un exemple pour montrer comment utiliser le recherche paramètre dans utiliserEmplacement:

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

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

  // Extracting search parameters
  const searchParams = new URLSearchParams(location.search);
  console.log(location);
  const category = searchParams.get('category');
  console.log(category)
  const query = searchParams.get('sort');

  return (
    <div>
      <h2>Location Information</h2>
      <p><strong>Current Path:</strong> {location.pathname}</p>
      <p><strong>Search Params:</strong> {location.search}</p>
      <p><strong>Query:</strong> {query}</p>
      <p><strong>Category:</strong> {category}</p>
    </div>
  );
}

export default LocationInfo;

Dans cet exemple, nous importons utiliserEmplacement depuis réagir-routeur-dom et utilisez-le pour accéder à l’objet de localisation actuel. Nous créons ensuite un URLSearchParams objet du recherche propriété de l’objet location pour analyser les paramètres de requête. Nous extrayons des paramètres de requête spécifiques en utilisant le obtenir() méthode du URLSearchParams objet et les afficher dans le JSX.

Sortir:

Accéder au fragment de hachage

Le hacher paramètre dans le utiliserEmplacement hook représente la partie de hachage de l’URL. La partie de hachage d’une URL est généralement utilisée pour naviguer dans une seule page HTML en accédant à une section spécifique, souvent appelée lien d’ancrage. Un hachage est précédé du symbole # et peut contenir n’importe quel caractère codé en URL valide.

Par exemple, dans l’URL https://exemple.com/#aboutle paramètre de hachage est #à propos. Ici, à propos est la valeur de hachage, indiquant que la page doit défiler jusqu’à la section avec l’ID « à propos ».

Créons un exemple pour montrer comment utiliser le hacher paramètre dans utiliserEmplacement:

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

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

  return (
    <div>
      <h2>Location Information</h2>
      <p><strong>Current Path:</strong> {location.pathname}</p>
      <p><strong>Hash:</strong> {location.hash}</p>
    </div>
  );
}

export default LocationInfo;

Sortir:

Récupération des informations d’état

Le État paramètre dans le utiliserEmplacement hook représente toute information d’état associée à l’emplacement. Il permet de transmettre des données supplémentaires avec les transitions d’itinéraire, ce qui peut être utile dans les scénarios dans lesquels des données complexes doivent être transmises entre les itinéraires.

Créons un exemple pour montrer comment utiliser le État paramètre dans utiliserEmplacement:

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

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

  return (
    <div>
      <h2>Location Information</h2>
      <p><strong>Current Path:</strong> {location.pathname}</p>
      <p><strong>State:</strong> {JSON.stringify(location.state)}</p>
    </div>
  );
}

export default LocationInfo;

Sortir:

Note: Vous pouvez également accéder à l’état de localisation directement depuis history.location, mais ce n’est pas recommandé car il est modifiable. Il est préférable d’utiliser l’objet location transmis à vos composants par React Router, car il garantit l’immuabilité.

Vous pouvez accéder à l’objet de localisation dans React Router pour déterminer quand la navigation a lieu. Ceci est particulièrement utile pour des tâches telles que la récupération de données ou le déclenchement d’animations basées sur des changements d’itinéraire. L’objet de localisation reste inchangé tout au long du cycle de vie, ce qui vous permet de l’utiliser efficacement dans les hooks de cycle de vie pour les tâches liées à la navigation.

Explorer useParams

useParams, un hook fourni par React-Router-dom, vous permet d’accéder aux paramètres de la route actuelle. Cela s’avère particulièrement utile lorsque vous créez des applications nécessitant un routage dynamique, où l’URL contient des parties variables que vous souhaitez capturer et utiliser dans votre composant.

Passons en revue un exemple complet d’utilisation useParams dans une application React. Nous allons créer une simple visionneuse d’articles de blog dans laquelle l’ID de l’article fait partie de l’URL.

Composant Accueil (Home.js)

Le Maison Le composant est un composant fonctionnel qui restitue la page d’accueil de notre plateforme de blogs. Il affiche une liste d’articles de blog avec des liens vers des pages d’articles individuelles.

// src/Home.js
import React from "react";
import { Link } from "react-router-dom";

function Home() {
  const posts = [
    { link: "/post/1", name: "Post 1" },
    { link: "/post/2", name: "Post 2" },
    { link: "/post/3", name: "Post 3" },
  ];
  return (
    <div className="container">
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(({link, name}) => (
          <li>
            <Link to={link}>{name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

Composant de publication (Post.js)

Le Poste Le composant est également fonctionnel. Il récupère l’ID de publication à partir de l’URL en utilisant le useParams crochet fourni par réagir-routeur-dom. Ensuite, il récupère et affiche le contenu de l’article de blog correspondant.

// src/Post.js
import React from "react";
import { useParams } from "react-router-dom";

function Post() {
  let { postId } = useParams();

  return (
    <div className="container">
      <div className="post">
        <h2>Post ID: {postId}</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec
          ligula sit amet justo malesuada facilisis. Integer sodales, ligula id
          fringilla posuere, justo ex cursus turpis, at tempus risus lectus in
          nisi.
        </p>
      </div>
    </div>
  );
}

export default Post;

Sortir:

Conclusion:

Dans cet article de blog, nous avons exploré les hooks useLocation et useParams dans React Router et démontré leur utilisation avec des exemples pratiques. Vous pouvez facilement créer des composants réactifs et dynamiques qui fonctionnent avec l’URL dans vos applications React en utilisant ces hooks. Connaître et utiliser ces hooks améliorera votre routage et votre expérience utilisateur quelle que soit la complexité de l’application Web que vous développez. Bon routage !