Comment rediriger par programme dans React Router v6 avec des composants de classe ?

Problème de redirection par programme vers une route dans React Router v6

Problème

Face à une TypeError : impossible de lire les propriétés d'undefined (lecture de 'push' ) en essayant de naviguer à l'aide du hook useNavigate dans un composant de classe.

Cause

Dans React Router v6, useNavigate n'est compatible qu'avec les composants de fonction. Lorsque vous essayez de l'utiliser dans un composant de classe (AddContacts), il reste indéfini, ce qui entraîne l'erreur.

Solution

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

1. Convertir AddContacts en composant de fonction

Refactorisez le composant de classe AddContacts en composant de fonction. Cela vous permettra d'utiliser le hook useNavigate directement dans la fonction.

2. Utilisez un Custom withRouter HOC (Higher Order Component)

Créez un personnalisé withRouter HOC pour injecter les accessoires d'itinéraire, y compris useNavigate, dans le composant AddContacts.

Voici un exemple de personnalisation withRouter HOC :

const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

  return (
    <WrappedComponent
      {...props}
      navigate={navigate}
    />
  );
};

Ensuite, décorez le composant AddContacts avec le HOC :

export default withRouter(AddContacts);

Cela transmettra l'accessoire de navigation au composant AddContacts et vous permettra de l'utiliser comme prévu.

Remarque sur le changement de l'API de navigation

Dans React Router v6, l'API de navigation a changé. L'objet historique n'est plus directement utilisé. Au lieu de cela, il existe une fonction de navigation qui prend un ou deux arguments : un chemin cible et un objet "options" facultatif pour le remplacement ou l'état.

Pour naviguer par programme, utilisez la syntaxe suivante :

this.props.navigate('/');

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!