Navigation React Router v6 / Blogs / Perficient

Dans le développement de React͏, un déplacement fluide entre les pages est essentiel pour une expérience utilisateur transparente. React Router v6 fait ressortir le hook useNavigate pour une navigation avancée, simplifiant la logique de navigation dans les éléments fonctionnels. Cet article de blog approfondira le hook useNavigate, ses fonctionnalités, ses fonctions et ses avantages dans React Router v6.

Présentation de useN͏avigate

Dans React Router͏ v6, useNavigate͏ est un hook ͏donné ͏par͏ le package réaction-͏r͏oute͏r-dom. Il remplace le hook useHistory des versions précédentes et fournit des fonctionnalités similaires pour se déplacer entre les itinéraires par programmation. Le hook useNavigate redonne une fonction de navigation qui vous aide à naviguer vers différents itinéraires au sein de votre application. Pour en savoir plus sur la navigation dans React Router, consultez mon autre article de blog sur navigation avec useHistory.

Comment utiliser useNavigate

Illustrons l’utilisation de useNavigate avec un exemple :

Étape 1 : Importer useNavigate

Tout d’abord, importez le utiliserNaviguer hook du package ‘react-router-dom’ en haut de votre fichier de composant fonctionnel :

import { useNavigate } from 'react-router-dom';

Étape 2 : Accédez à la fonction de navigation

Au sein de votre composant fonctionnel, appelez le utiliserNaviguer crochet pour accéder au naviguer fonction:

const navigate = useNavigate();

Étape 3 : utilisez la fonction de navigation pour naviguer

Ensuite, vous pouvez utiliser la fonction de navigation pour naviguer vers différents chemins dans votre application. Cela peut être déclenché par une action telle que cliquer sur un bouton ou par une autre raison déclenchant cela :

import React from "react";
import { useNavigate } from 'react-router-dom';
import Heading from "./Heading";
import "./NavigationDemo.css";

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

  const navigateToNewPath = () => {
    navigate('/new-path' , { state: { page: 'New Page' } }); 
  };

  const replaceCurrentPath = () => {
    navigate('/updated-path', { state: { page: 'Updated Page' } }); 
  };
  return (
    <div className="container">
      <Heading>React Router Navigation Demo</Heading>
      <button onClick={navigateToNewPath}>Navigate to New Path</button>
      <button onClick={replaceCurrentPath}>Replace Current Path</button>
    </div>
  );
};

export default NavigationDemo;

Dans cet exemple, lorsque vous cliquez sur le bouton Naviguer vers un nouveau chemin, le naviguerVersNouveauChemin la fonction est appelée, qui utilise ensuite le naviguer fonction pour naviguer vers l’itinéraire ‘/new-path’. Lorsque vous cliquez sur le bouton Remplacer le chemin actuel, il remplace le chemin actuel par un chemin mis à jour dans l’historique, c’est-à-dire vers « /updated-path ».

Sortir:

Caractéristiques et fonctions d’utilisationNaviguer

Le hook useNavigate fournit plusieurs fonctionnalités et fonctions pour la gestion de la navigation :

naviguer(vers, options): La fonction principale renvoyée par useNavigate. Va à l’itinéraire spécifié avec d’autres options de routage.

emplacement: Propriété en lecture seule qui renvoie l’objet d’emplacement actuel contenant des informations sur l’URL actuelle.

statut: Propriété en lecture-écriture qui permet de transmettre les données d’état à la destination.

remplacer(à, indiquer): Une fonction qui remplace le contenu actuel de la pile historique par une nouvelle représentation telle que history.replace.

précharger(à): Fonction qui précharge le code d’une méthode spécifiée de manière asynchrone, utile pour améliorer les performances de communication côté client.

Avantages de useNavigate par rapport à useHistory dans React Router v6

Avec la mise à niveau de React Router v5 vers v6, le utiliserNaviguer le crochet a remplacé le utiliserHistorique crochet comme option plus flexible. Cette amélioration reflète un effort délibéré visant à simplifier la logique de navigation dans les applications React. Voici plusieurs avantages clés de useNavigate par rapport à useHistory :

1. API simplifiée

useNavigate fournit une API plus simple que useHistory, permettant aux développeurs d’effectuer plus facilement des tâches de navigation sans interagir directement avec l’objet historique.

Approche useHistory :

const history = useHistory();
history.push('/home');
history.replace('/login');

Approche useNavigate :

const navigate = useNavigate();
navigate('/home'); // Equivalent to history.push
navigate('/login', { replace: true }); // Equivalent to history.replace

2. Aide au transport connexe

useNavigate prend en charge nativement la navigation relative, permettant aux développeurs d’écrire une logique de navigation plus maintenable et plus flexible, en particulier dans les scénarios de routage imbriqués.

• Dans useHistory, la navigation dans le chemin actuel est fastidieuse et sujette aux erreurs, nécessitant la création manuelle du chemin cible.
• useNavigate facilite en fournissant des instructions de navigation sur le chemin actuel.

3. Intégration directe avec l’environnement de navigation

La navigation dans l’état sur le chemin de destination est encore plus facile avec useNavigate, augmentant la possibilité de partager l’état entre les chemins sans encombrement d’URL.

Méthode useHistory :

history.push({ pathname: '/dashboard', state: { Login: true } });

Méthode useNavigate :

navigate('/dashboard', { state: { Login: true } });

4. Pratiques de routage améliorées

useNavigate fournit des méthodes supplémentaires pour gérer le comportement de navigation, telles que le changement, le toucher, prévenirScrollReset et d’autres méthodes avancées, qui ne sont ni directes ni intuitives dans useHistory.

5. Stratégies évolutives et recommandées

L’introduction de useNavigate dans React Router v6 et l’ignorance de useHistory signalent un changement vers un moyen plus simple et plus efficace de gérer le trafic. L’adoption de useNavigate est encouragée pour rendre votre application évolutive et conforme aux dernières meilleures pratiques de développement React.

6. Programmabilité et lisibilité améliorées

Le hook useNavigate augmente la programmabilité en permettant aux développeurs de naviguer facilement par programme, améliorant ainsi la lisibilité et la maintenabilité du code. Il élimine les difficultés liées aux déplacements et clarifie la pensée du concepteur.

Gestion des chemins relatifs et des cas d’utilisation avancés

L’approche de React Router v6 en matière de chemins relatifs et de scénarios de navigation avancés offre aux développeurs une flexibilité accrue. Par exemple, pour naviguer par rapport à l’URL actuelle au lieu de la hiérarchie des itinéraires, les développeurs peuvent manipuler l’emplacement actuel avec le constructeur d’URL, facilitant ainsi des modèles de navigation plus complexes. Vous pouvez également vérifier ceci doc pour plus d’informations.

De plus, React Router v6 introduit des options expérimentales telles que unstable_flushSync et unstable_viewTransition, offrant aux développeurs des moyens expérimentaux de gérer la navigation et d’afficher les transitions. Bien que marquées comme instables, ces fonctionnalités mettent en évidence le développement en cours et les capacités futures potentielles du React Router.

options.unstable_flushSync

L’option options.unstable_flushSync est utilisée pour contrôler le timing des mises à jour d’état pendant la navigation. Par défaut, React Router utilise React.startTransition pour les mises à jour d’état lors de la navigation entre les itinéraires. Cette approche permet à React de prioriser différents types de mises à jour et peut aider à maintenir la réactivité de l’application même lors de mises à jour volumineuses. Cependant, il existe des situations dans lesquelles un développeur peut avoir besoin que la mise à jour de l’état se produise de manière synchrone, en particulier si un retour d’information immédiat est nécessaire après une action de navigation.

Lorsque unstable_flushSync est défini sur true, React Router DOM encapsule la mise à jour de l’état initial pour la navigation dans un appel ReactDOM.flushSync. Cela rend la mise à jour synchrone, garantissant que le changement d’état et la mise à jour de l’interface utilisateur associée se produisent immédiatement sans attendre d’autres mises à jour.

Il est important de noter qu’en raison de son impact potentiel sur les performances et l’expérience utilisateur, cette sélection doit être utilisée avec parcimonie et de la manière la plus simple possible, tout en étant absolument essentielle.

options.unstable_viewTransition

L’option options.unstable_viewTransition permet d’utiliser des transitions de vue pour une action de navigation. Cela fait partie d’un ensemble de fonctionnalités expérimentales qui offrent plus de contrôle sur la façon dont les changements visuels sont gérés lors de la navigation entre les itinéraires.

Définir unstable_viewTransition sur true indique que la navigation doit déclencher une transition de vue. Cela peut être utile dans les scénarios dans lesquels vous souhaitez appliquer des styles ou des animations spécifiques pendant la transition d’itinéraire. Il exploite l’API document.startViewTransition(), permettant aux développeurs de définir une période pendant laquelle les éléments des anciennes et des nouvelles routes peuvent se chevaucher, permettant des transitions plus fluides.

Cette option améliore la continuité visuelle de votre application lors des événements de navigation. Comme unstable_flushSync, unstable_viewTransition est marqué comme instable et expérimental. Il fait partie des efforts continus visant à améliorer l’expérience de routage dans les applications Web, mais doit être utilisé avec prudence, car son comportement pourrait changer dans les versions futures.

Conclusion:

useNavigate est un ajout précieux à React Router v6, offrant un moyen intuitif et efficace de gérer la navigation dans les objets actifs. Ses caractéristiques et fonctionnalités offrent aux développeurs des outils puissants pour gérer la logique de navigation et améliorer l’expérience utilisateur dans les applications React. En utilisant useNavigate, vous pouvez rationaliser les performances de navigation et créer une expérience de navigation transparente pour vos utilisateurs dans les applications React Router v6.