Wie gehe ich mit der programmgesteuerten Umleitung in Komponenten der React Router v6-Klasse um?

Das Problem verstehen: Umleitung in React Router v6

Programmatische Navigation in React Router v6 stellt im Vergleich zu früheren Versionen eine einzigartige Herausforderung dar. Klassenkomponenten, die in früheren Iterationen vorherrschend waren, stoßen auf eine undefinierte Navigationsstütze, was zu einem TypeError führt.

Ursache des Problems

React Router v6 führte eine Verschiebung der Navigationsstrategie ein und entfernte sich von die direkte Verwendung des History-Objekts. Stattdessen wird Navigieren verwendet, eine funktionale API, die einen Zielpfad und optionale Optionen akzeptiert. Diese Änderung wirkte sich auf Klassenkomponenten aus, bei denen auf die Navigationsstütze nicht mehr automatisch zugegriffen werden kann.

Lösung des Problems

Um dieses Problem zu lösen, gibt es zwei Hauptansätze:

1. Konvertieren einer Klassenkomponente in eine Funktionskomponente:
   Dieser Ansatz beinhaltet die Umwandlung der Klassenkomponente in eine Funktionskomponente, die die direkte Verwendung der Hooks von React-Router-Dom, einschließlich useNavigate, ermöglicht.

2. Erstellen einer benutzerdefinierten withRouter-Komponente höherer Ordnung:
   Wenn die Konvertierung in eine Funktionskomponente nicht möglich ist, können Sie eine benutzerdefinierte Komponente höherer Ordnung (HOC) erstellen, die im Wesentlichen die Navigation einfügt prop in die Zielkomponente. Hier ist ein Beispiel für einen solchen HOC mit dem Namen withRouter:

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

   Nach dem Login kopieren

Implementieren der Lösung

Sobald Sie den withRouter HOC erstellt haben, wenden Sie ihn auf die Zielklassenkomponente an. Fügen Sie Kontakte wie folgt hinzu:

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

Dadurch wird die Navigationsstütze der umschlossenen Komponente zugänglich gemacht, sodass Sie eine programmgesteuerte Navigation durchführen können.

Navigations-API-Änderungen

Zusätzlich zu Mit der Umstellung von Klassenkomponenten führte React Router v6 auch Änderungen an der Navigations-API ein. Anstelle des zuvor verwendeten Verlaufsobjekts müssen Sie jetzt die Navigationsfunktion aufrufen und dabei den Zielpfad und alle optionalen Status- oder Ersetzungsflags übergeben.

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

Indem Sie eine der oben genannten Lösungen implementieren und die aktualisierte Navigations-API verstehen können Sie in React Router v6 erfolgreich programmgesteuerte Weiterleitungen von Klassenkomponenten durchführen.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit der programmgesteuerten Umleitung in Komponenten der React Router v6-Klasse um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!