Comment gérer la redirection programmatique dans les composants de classe React Router v6 ?

Comprendre le problème : la redirection dans React Router v6

La navigation programmatique dans React Router v6 présente un défi unique par rapport aux versions précédentes. Les composants de classe, qui étaient répandus dans les itérations précédentes, rencontrent un accessoire de navigation non défini, entraînant une TypeError.

Cause du problème

React Router v6 a introduit un changement dans la stratégie de navigation, s'éloignant de l'utilisation directe de l'objet historique. Au lieu de cela, il utilise naviguer, une API fonctionnelle qui accepte un chemin cible et des options facultatives. Ce changement a eu un impact sur les composants de classe, où l'accessoire de navigation n'est plus automatiquement accessible.

Résoudre le problème

Pour résoudre ce problème, il existe deux approches principales :

1. Conversion d'un composant de classe en composant de fonction :
   Cette approche consiste à transformer le composant de classe en un composant de fonction, ce qui permet d'utiliser directement Les hooks de React-Router-dom, y compris useNavigate.

2. Création d'un composant d'ordre supérieur personnalisé avecRouter :
   Si la conversion en composant de fonction n'est pas réalisable, vous pouvez créer un composant d'ordre supérieur (HOC) personnalisé qui injecte essentiellement l'accessoire de navigation dans le composant cible. Voici un exemple d'un tel HOC nommé withRouter :

   <code class="js">const withRouter = WrappedComponent => props => {
     const navigate = useNavigate();
     return (
       <WrappedComponent
         {...props}
         navigate={navigate}
       />
     );
   };</code>

Implémentation de la solution

Une fois que vous avez créé le withRouter HOC, appliquez-le au composant de classe cible, Ajoutez des contacts, comme suit :

<code class="js">export default withRouter(AddContacts);</code>

Cela exposera l'accessoire de navigation au composant encapsulé, vous permettant d'effectuer navigation programmatique.

Modifications de l'API de navigation

En plus du passage des composants de classe, React Router v6 a également introduit des modifications dans l'API de navigation. Au lieu de l'objet d'historique précédemment utilisé, vous devez maintenant appeler la fonction de navigation, en transmettant le chemin cible et tout état facultatif ou en remplaçant les indicateurs.

<code class="js">this.props.navigate("/");</code>

En implémentant l'une des solutions susmentionnées et en comprenant l'API de navigation mise à jour. , vous pouvez effectuer avec succès des redirections programmatiques à partir de composants de classe 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!