Wie behebt man den Fehler „TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest \'push\')\“ in React Router v6?

Programmatische Navigation in React Router v6

Programmatische Navigation in React Router v6 kann den „TypeError: Eigenschaften von undefiniert können nicht gelesen werden (lesen ' push')" Fehler. Dies tritt auf, wenn versucht wird, von einer nicht vorhandenen Navigationsstütze aus zu navigieren, die nicht definiert ist.

Ursache:

Der useNavigate-Hook ist für Funktionskomponenten konzipiert. Klassenkomponenten erfordern eine benutzerdefinierte Komponente höherer Ordnung (HOC) oder eine Konvertierung in Funktionskomponenten.

Lösung 1: In Funktionskomponente konvertieren

AddContacts in eine Funktionskomponente konvertieren und verwenden 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>

Lösung 2: Benutzerdefiniert mitRouter HOC

Erstellen Sie ein benutzerdefiniertes mitRouter HOC:

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

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

Und verpacken Sie AddContacts mit dem HOC :

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

Aktualisierte Navigationssyntax

In React Router v6 hat die Navigationsfunktion eine geänderte Syntax:

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

Somit die Die Navigationsanweisung wird zu:

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

Durch die Verwendung dieser Lösungen können Sie in React Router v6 effektiv programmgesteuert navigieren und den undefinierten Navigationsfehler vermeiden.

Das obige ist der detaillierte Inhalt vonWie behebt man den Fehler „TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest \'push\')\“ in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!