Utilisation de la redirection dans React Router

1. React Router Redirect dans les composants fonctionnels
2. React Router Redirect dans les composants de classe

Si vous êtes un développeur travaillant sur des applications Web complexes, vous comprenez probablement l’importance du routage. Les itinéraires sont l’un des éléments clés qui composent le système de navigation de l’application. Les développeurs de ReactJs ont tendance à utiliser le package react-router-dom pour créer des routes pour les applications.

Après avoir soumis un formulaire (ou toute autre action de l’utilisateur), l’application doit parfois naviguer vers une URL différente. Dans cet article, nous verrons comment gérer les redirections dans React.

React Router Redirect dans les composants fonctionnels

Les crochets peuvent étendre les fonctionnalités de base des composants fonctionnels. Les développeurs React peuvent utiliser des hooks intégrés comme useReducer(), useState(), useEffect() ou créer leurs propres versions personnalisées.

Crochet useHistory()

Le useHistory() renvoie une instance history, qui contient l’emplacement actuel (URL) du composant. La gestion des redirections n’est pas l’objectif principal de ce hook. Cependant, les nouvelles versions de React Router (5 et supérieures) vous permettent d’utiliser ce hook pour rediriger l’utilisateur de manière efficace et lisible.

Regardons l’exemple :

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

Dans cet exemple, nous importons le hook useHistory du package react-router-dom. Ensuite, nous définissons un composant fonctionnel simple qui renvoie un seul élément <span> avec un gestionnaire d’événement pour l’événement click.

Nous créons également une variable history pour stocker l’instance renvoyée par le crochet useHistory().

Dans le corps de la fonction gestionnaire d’événements, nous utilisons une méthode .push() et passons une chaîne en argument. L’argument de cette méthode sera ajouté à l’URL actuelle à la fin. Ainsi, si notre application s’exécutait sur le port localhost:3000 et que nous devions gérer un événement click, notre URL deviendrait localhost:3000/somepage.

React Router Redirect dans les composants de classe

Une autre façon de naviguer vers une URL différente après avoir effectué une action (soumettre un formulaire, cliquer sur un bouton ou toute autre action de l’utilisateur) consiste à utiliser le composant personnalisé <Redirect>. Vous pouvez l’importer depuis la bibliothèque "react-router-dom".
Vous pouvez contrôler le moment où la redirection a lieu en la rendant conditionnellement basée sur la valeur de l’état. Regardons cet exemple :

import React from "react"
import { Redirect } from "react-router-dom"

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

Notre état a une propriété condition, qui est définie sur false. A cause de cette valeur booléenne, le composant <Redirect> ne s’affiche pas et l’URL de l’utilisateur ne change pas.

En cliquant sur le bouton unique, les utilisateurs peuvent déclencher un gestionnaire d’événements qui définit la propriété condition sur true. Dans ce cas, les critères de l’instruction if seront remplis et la fonction de rendu retournera le composant <Redirect>, qui dirigera les utilisateurs vers le chemin relatif spécifié.

Dans ce cas, si notre application a une page d’accueil à localhost:3000, et notre composant <Redirect> a un attribut to avec la valeur '/somePage', les utilisateurs seront redirigés vers le suivant emplacement : localhost:3000/somePage.

this.props.history.push("")

L’utilisation du hook useHistory() n’est pas le seul moyen d’accéder à l’emplacement actuel de l’utilisateur. Les développeurs peuvent obtenir la même chose dans les deux types de composants en lisant la propriété history de l’objet props.

Si vous souhaitez que la redirection se produise après avoir cliqué sur un bouton, vous devez configurer un gestionnaire d’événements onClick, qui utilisera la méthode .push("") pour fournir un chemin relatif vers l’emplacement où l’utilisateur doit être redirigé. Voici un exemple :

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

Si leur emplacement actuel se trouve sur la page d’accueil localhost:3000, cliquer sur ce bouton amènera les utilisateurs à l’URL localhost:3000/somePage.