Comment rediriger par programme dans React Router v6 à partir d'un composant de classe ?

Dans React Router v6, comment puis-je rediriger par programme vers une route spécifique à partir d'un composant de classe ?

Problème :

Lorsque vous tentez de rediriger par programme vers une route différente à partir d'un composant de classe dans React Router v6, vous pouvez rencontrer l'erreur suivante :

TypeError: Cannot read properties of undefined (reading 'push')

Cette erreur se produit car l'accessoire de navigation n'est pas disponible sur les composants de classe dans la v6. . Au lieu de cela, il n'est accessible qu'aux composants fonctionnels.

Solution :

Il existe deux façons de résoudre ce problème :

1. Convertissez le composant de classe en composant de fonction :

   • Convertissez le composant de classe AddContacts en composant fonctionnel à l'aide de hooks (par exemple, useState, useEffect et useNavigate).

2. Créez un HOC withRouter personnalisé :

   • Créez un composant d'ordre supérieur (HOC) appelé withRouter qui injecte l'accessoire de navigation et d'autres React Router s'accroche au composant encapsulé.
   • Décorez le composant AddContacts avec le withRouter HOC de la manière suivante :

import withRouter from './withRouter'; // Change this to the path of your custom HOC file

export default withRouter(AddContacts);

Cela fournira la navigation prop au composant AddContacts.

Remarque supplémentaire :

Dans React Router v6, la fonction de navigation n'est plus un objet mais une fonction qui prend le chemin cible comme le premier argument et un objet options facultatif comme deuxième argument.

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: State }
  ): void;
  (delta: number): void;
}

Cela signifie que la syntaxe de navigation a également changé. Pour accéder à un itinéraire à l'aide de la navigation, appelez la fonction comme suit :

// Example usage
this.props.navigate("/");

En suivant l'une des solutions ci-dessus, vous devriez pouvoir rediriger par programme vers différentes routes dans React Router v6.

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!