Maîtriser la navigation dans React avec le hook useNavigate

utilisez Navigate Hook dans React

Le hook useNavigate fait partie de React Router (v6 et supérieures) et est utilisé pour naviguer par programme entre les différentes routes de votre application. Contrairement à la navigation traditionnelle (par exemple, cliquer sur des liens), le hook useNavigate vous permet de naviguer de manière dynamique en fonction des actions de l'utilisateur, telles que les soumissions de formulaires, les clics sur des boutons ou les changements d'état.

Ce hook remplace l'ancien hook useHistory de React Router v5 et facilite la gestion de la navigation au sein des composants fonctionnels.

---

Comment fonctionne useNavigate

Le hook useNavigate renvoie une fonction qui peut être utilisée pour naviguer par programme vers un itinéraire spécifique. Vous pouvez transmettre un chemin ou un objet de localisation à cette fonction, et elle effectuera la navigation en conséquence.

Syntaxe :

const navigate = useNavigate();

Paramètres :

• path (string) : Le chemin vers lequel accéder (par exemple, "/home", "/profile/:id").
• options (facultatif, objet) :
  • replace : un booléen qui détermine si la navigation doit remplacer l'entrée actuelle de l'historique (la valeur par défaut est false).
  • état : un état facultatif que vous pouvez transmettre au nouvel itinéraire. Cela peut être utile pour transmettre des informations à l'itinéraire de destination.

Utilisation courante :

• Naviguez vers un itinéraire différent.
• Remplacer l'entrée actuelle de l'historique (pas d'action de retour).
• Passer un état supplémentaire à l'itinéraire de destination.

---

Exemple : Navigation de base avec useNavigate

Voici un exemple simple de la façon dont vous pouvez utiliser le hook useNavigate pour naviguer par programme lorsqu'un utilisateur clique sur un bouton.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Explication :

• Le hook useNavigate est utilisé pour obtenir la fonction de navigation.
• Lorsque vous cliquez sur le bouton, la fonction goToProfile est appelée, qui utilise naviguer('/profile') pour naviguer par programme vers l'itinéraire /profile.

---

Exemple : Naviguer avec des paramètres dynamiques

Vous pouvez également utiliser useNavigate pour naviguer vers des itinéraires dynamiques, où vous transmettez des paramètres.

const navigate = useNavigate();

Explication :

• Le navigateur(/user/${userId}) génère dynamiquement une URL basée sur le paramètre userId.
• Cliquez sur le bouton de l'utilisateur 1 ou de l'utilisateur 2 pour accéder à /user/1 ou /user/2.

---

Exemple : Remplacer l'entrée de l'historique par l'option de remplacement

Lors de la navigation, vous pouvez utiliser l'option de remplacement pour remplacer l'entrée actuelle dans la pile d'historique au lieu d'en pousser une nouvelle. Cela signifie que lorsque l'utilisateur clique sur le bouton « retour » du navigateur, il ne reviendra pas à l'itinéraire précédent.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Explication :

• Le navigateur('/merci', {replace: true }) naviguera vers l'itinéraire /merci et remplacera l'entrée actuelle dans la pile d'historique, ce qui signifie que l'utilisateur ne pourra pas revenir à la page de soumission du formulaire en utilisant le bouton "retour".

---

Exemple : État de passage avec navigation

Vous pouvez transmettre un état supplémentaire avec la navigation, qui est ensuite accessible sur l'itinéraire cible à l'aide de useLocation.

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

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

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

Sur la route /settings, vous pouvez accéder à l'état passé comme ceci :

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

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

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

Explication :

• Le navigateur('/settings', { state: { userId: 123, userName: 'John Doe' } }) transmet un objet en tant qu'état.
• Dans le composant /settings, nous utilisons useLocation pour accéder à l'état transmis, qui inclut userId et userName.

---

Cas d'utilisation courants pour useNavigate

1. Redirection après la soumission du formulaire :
   Après avoir soumis un formulaire (par exemple, inscription d'un utilisateur), vous pouvez rediriger l'utilisateur vers une page de réussite ou de connexion.

2. Navigation conditionnelle :
   En fonction des actions ou des conditions de l'utilisateur (comme l'authentification), vous pouvez naviguer dynamiquement vers différents itinéraires.

3. Routage Programmatique :
   Vous pouvez naviguer par programmation en fonction d'une logique personnalisée, par exemple lorsqu'une action se termine ou qu'un événement est déclenché.

4. Navigation après un appel API réussi :
   Après un appel API réussi (par exemple, connexion), vous pouvez rediriger les utilisateurs vers leur page de profil ou leur tableau de bord.

---

Conclusion

Le hook useNavigate dans React Router est un outil puissant pour gérer la navigation programmatique dans les composants fonctionnels. Il vous permet de naviguer dynamiquement vers différents itinéraires en fonction des actions de l'utilisateur ou de l'état de l'application. Avec des options telles que le remplacement et la possibilité de transmettre l'état, useNavigate offre une flexibilité pour contrôler le comportement de navigation dans les applications React.

---

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!