Wie kann ich in React Router v6 eine Klassenkomponente programmgesteuert umleiten?

Wie leite ich in React Router v6 programmgesteuert von einer Klassenkomponente zu einer bestimmten Route um?

Problem:

Beim Versuch, programmgesteuert von einer Klassenkomponente in React Router v6 auf eine andere Route umzuleiten, kann der folgende Fehler auftreten:

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

Dieser Fehler tritt auf, weil die Navigationsstütze für Klassenkomponenten in v6 nicht verfügbar ist . Stattdessen ist es nur für Funktionskomponenten zugänglich.

Lösung:

Es gibt zwei Möglichkeiten, dieses Problem zu beheben:

1. Konvertieren Sie die Klassenkomponente in eine Funktionskomponente:

   • Konvertieren Sie die AddContacts-Klassenkomponente mithilfe von Hooks (z. B. useState, useEffect und useNavigate) in eine Funktionskomponente.

2. Erstellen Sie ein benutzerdefiniertes withRouter HOC:

   • Erstellen Sie eine Komponente höherer Ordnung (HOC) namens withRouter, die die Navigationsstütze und andere einfügt React Router hakt sich in die verpackte Komponente ein.
   • Dekorieren Sie die AddContacts-Komponente mit dem withRouter HOC auf folgende Weise:

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

export default withRouter(AddContacts);

Dies sorgt für die Navigation prop zur AddContacts-Komponente.

Zusätzlicher Hinweis:

In React Router v6 ist die Navigationsfunktion kein Objekt mehr, sondern eine Funktion, die den Zielpfad als aufnimmt das erste Argument und ein optionales Optionsobjekt als zweites Argument.

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

Das bedeutet, dass sich auch die Syntax für die Navigation geändert hat. Um mit Navigieren zu einer Route zu navigieren, rufen Sie die Funktion wie folgt auf:

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

Wenn Sie eine der oben genannten Lösungen befolgen, sollten Sie in React Router v6 programmgesteuert zu verschiedenen Routen umleiten können.

Das obige ist der detaillierte Inhalt vonWie kann ich in React Router v6 eine Klassenkomponente programmgesteuert umleiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!