La navigation par programmation fait référence au moment où un utilisateur est redirigé suite à une action qui se produit sur un itinéraire, comme une action de connexion ou d'inscription. Dans cet article, nous examinerons une myriade d'approches pour naviguer par programmation avec React Router.

L'idéologie React se compose de trois concepts de base: l'événement utilisateur, la gestion des états et la fonction de rendu. On peut dire que le routage programmatique est conforme à cette idéologie.

L'effet du routage par programmation est sur la même longueur d'onde que l'absence de changement d'itinéraire ou, à d'autres moments, peut entraîner le besoin de changer un itinéraire. Lorsque le besoin s'en fait sentir, il ne sera pas déclenché en cliquant sur un lien, nous n'avons donc pas toujours à utiliser un composant Lien, et l'utilisation d'un composant Lien dans de tels scénarios n'est pas optimale.

Parfois, nous voulons un autre composant action: nous souhaitons naviguer vers un itinéraire différent uniquement lorsqu'un événement particulier se produit ou lorsqu'un utilisateur effectue une action telle que l'envoi d'un formulaire qui vous mène à une nouvelle page. Nous nous référons à ce genre d'action comme navigation programmatique .

React Router est conçu pour suivre l'idéologie mentionnée précédemment. Ainsi, la navigation par programmation avec React Router devrait, par définition, s'aligner sur ces trois concepts de base.

React Router nous fournit un objet d'historique, qui est accessible en passant cet objet dans chaque route comme accessoire. Cet objet historique nous permet de contrôler manuellement l'historique du navigateur. Puisque React Router modifie ce que nous voyons en fonction de l'URL actuelle, l'objet historique nous donne un contrôle précis sur le moment et l'endroit où les éléments individuels de l'application sont affichés.

Qu'est-ce que la navigation programmatique?

La navigation programmatique fait référence à quand un utilisateur est redirigé suite à une action qui se produit sur une route. Une action de connexion ou d'inscription ou une action de soumission de formulaire sur un itinéraire est un exemple typique de navigation par programme. Dans cet article, nous examinerons une myriade d'approches pour naviguer par programmation avec React Router.

Utilisation du composant de redirection

La principale façon de naviguer par programmation à l'aide de React Router v4 + est d'utiliser un composant et c'est une méthode recommandée qui aide l'utilisateur à naviguer entre les routes.

L'utilisation du composant Redirect est une approche différente mais tout aussi valable. L'idée est de l'avoir pointé sur un état du composant, et si cette condition est remplie, alors naviguez.

Certains pourraient argumenter que cette méthode nécessite plus de travail car il faut créer un nouvel accessoire sur l'état du composant et ajouter une condition à la méthode de rendu pour vérifier quand effectuer le rendu du composant Redirect. C'est un fait, mais un compteur et un argument valide, de ceux qui préfèrent l'explicite à l'implicite: cela souligne l'idée que définir et modifier explicitement votre état est mieux car cela rend le code plus lisible par rapport à l'état implicite géré par une API impérative comme history.push que nous reviendrons dans un instant.

Voici un exemple de code d'utilisation du composant Redirect.

Codesandbox: https: // codesandbox. io / s / gallant-meitner-bshng? file = / src / App.js

 import React, {useState} de 'react';
import {Redirection} de 'react-router-dom';
import {userLogin} depuis './userAction';
importer le formulaire depuis './Form';
Const Login = () => {
 const [isLoggedIn, setIsLoggedIn] = useState (faux);
  
 const handleLogin = async (userDetail) => {
  const success = wait userLogin (userDetail);
  if (succès) setIsLoggedIn (true);
 }
  
  if (isLoggedIn) {
   retour 
  }
  revenir (
   <>
    
 Connexion 
    

   
  )
}
exporter la connexion par défaut;

Utilisation de la méthode history.push ()

history.push () est une autre approche où nous utilisons l'historique des accessoires fournis par React Router lors du rendu d'un composant.

En d'autres termes, cela fonctionne lorsque le composant est rendu par React Router, en contournant le composant comme accessoire de composant vers une Route. Si tel est le cas, le React Router expose trois accessoires au composant: location match et history .

Nous allons nous concentrer sur le histoire prop. Le support d'historique garde une trace de toute l'histoire de la session sous le capot et nous fournit différentes méthodes pour le manipuler.

La méthode push est essentielle et est utilisée pour pousser un chemin comme une route vers l'histoire pile qui s'exécute en tant que dernier entré, premier sorti (LIFO). Cela provoque la redirection de l'application vers la dernière route ajoutée, redirigeant ainsi l'utilisateur vers une route spécifiée. L'exemple ci-dessous suppose que le composant est rendu avec React Router.

Codesandbox: https://codesandbox.io/s/angry-saha-djh3z?file=/src/App.js

 import React from "réagir";
import {userLogin} depuis "./userAction";
importer le formulaire depuis "./Form";
const Login = props => {
 const handleLogin = asynchrone userDetail => {
  const success = wait userLogin (userDetail);
  if (succès) props.history.push ("/ profile");
 };
 revenir (
  <>
   
 Connexion 
   
  
 );
};
exporter la connexion par défaut;

Utilisation de la méthode withRouter

Nous avons mentionné précédemment que pour qu'un composant ait accès props.history.push il doit avoir été rendu avec React Router. Il y a des cas où cela pourrait ne pas être le cas. Ainsi, nous rendons un composant nous-mêmes. Pour rendre la propriété history disponible pour le composant, l'équipe React Router a créé le composant d'ordre supérieur (HOC) withRouter. L'emballage d'un composant avec ce HOC expose également les propriétés.

Codesandbox: https://codesandbox.io/s/silent-rain-l19lg?file=/src/App.js:0-442

 ] import React de 'react';
import {withRouter} de 'react-router-dom';
import {userLogin} depuis './userAction';
importer le formulaire depuis './Form';

const Login = (accessoires) => {
 const handleLogin = async (userDetail) => {
  const success = wait userLogin (userDetail);
  if (succès) props.history.push ('/ profile');
 }
 revenir (
   <>
    
 Connexion 
    
   
  )
}
export par défaut avec Routeur (Login);

Utilisation du hook useHistory

Depuis les versions récentes de React Router (v5.1) et React (v16.8), nous avons une nouvelle méthode appelée le hook useHistory qui englobe la puissance de React Hooks. Ceci est utilisé à des fins de navigation programmatique dans un composant fonctionnel. Le hook useHistory vous donne accès à l'instance history que nous pouvons utiliser pour naviguer entre les pages, que le composant ait été rendu par React Router ou non, ce qui élimine le besoin d'utiliser withRouter.

Codesandbox : https://codesandbox.io/s/serene-cookies-hc629?file=/src/App.js

 import {useHistory} de "react-router-dom";
const HomeButton = () => {
 let history = useHistory ();
 const handleClick = () => {
  history.push ("/ home");
 }
 revenir (
  
   rentrer chez soi
  
 );
}
Exporter le HomeButton par défaut;

Conclusion

L'objectif principal de cet article était de partager comment vous pouvez naviguer en toute sécurité entre les composants à l'aide du package React Router.

Considérant que React a une approche déclarative de la création d'interfaces utilisateur, l'utilisation de Redirect est l'approche recommandée pour la navigation lorsque le lien ne peut pas être utilisé. Il n'y a aucun mal à utiliser les autres méthodes car elles sont toutes prises en charge et sémantiquement correctes.

De plus, avec l'introduction de useHistory avec d'autres API dans la version 5.1.2, il devient encore plus facile de naviguer par programme tant que vous comprendre comment utiliser React Hooks.