Comment corriger l'erreur « TypeError : impossible de lire les propriétés d'un défini (lecture de \'push\')\ » dans React Router v6 ?

Navigation par programmation dans React Router v6

La navigation par programmation dans React Router v6 peut présenter l'erreur "TypeError : impossible de lire les propriétés d'undéfini (lecture de ' push')" erreur. Cela se produit lorsque vous tentez de naviguer à partir d'un accessoire de navigation inexistant, qui n'est pas défini.

Cause :

Le hook useNavigate est conçu pour les composants de fonction. Les composants de classe nécessitent un composant d'ordre supérieur (HOC) personnalisé ou une conversion en composants fonctionnels.

Solution 1 : convertir en composant fonctionnel

Convertir AddContacts en composant de fonction et utiliser useNavigate :

<code class="javascript">import { useNavigate } from "react-router-dom";

const AddContacts = () => {
  const navigate = useNavigate();

  const onSubmit = (e) => {
    // ... submit logic ...
    navigate("/");
  };

  return (
    // ... form elements ...
  );
};</code>

Solution 2 : Personnaliser avec le routeur HOC

Créer une personnalisation avec le routeur HOC :

<code class="javascript">const withRouter = (WrappedComponent) => (props) => {
  const navigate = useNavigate();

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

Et envelopper AddContacts avec le HOC :

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

Syntaxe de navigation mise à jour

Dans React Router v6, la fonction de navigation a une syntaxe modifiée :

<code class="javascript">navigate(to, options?);
// where to is the target path and options is an optional object with replace and/or state</code>

Ainsi, le L'instruction de navigation devient :

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

En utilisant ces solutions, vous pouvez naviguer efficacement par programme dans React Router v6 et éviter l'erreur de navigation non définie.

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!