Was soll ich tun, wenn der React-Router nicht angezeigt wird?

Lösung, um zu reagieren, dass der Router nicht angezeigt wird: 1. BrowserRouter zur übergeordneten Routing-Komponente hinzufügen, um den Router zu umschließen. 2. Verwenden Sie „this.props.history.go()“, um die Komponente zu aktualisieren {true}“; 4. Schreiben Sie die Hook-Funktion in „“ und rufen Sie sie auf, wenn Sie diese Route verlassen oder betreten.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn der React-Router nicht angezeigt wird?

react-router-dom Die Routensprungkomponente zeigt das Problem nicht an

Szenario

Wenn Sie die Sun-Route verwenden, um zur übergeordneten Route zu springen, unabhängig davon, ob Sie Link to oder this.props.history.push zum Springen verwenden, die URL-Adressleiste Es hat sich alles geändert, aber die Seitenkomponenten können nicht geladen werden und die Seite wird nicht aktualisiert. Klicken Sie auf der übergeordneten Route auf „Verknüpfen mit“, die gleiche Sprungposition, die URL bleibt unverändert, die Seite wird nicht aktualisiert, aber die Komponente wird geladen.

Überprüfen Sie this.props am Sprungpunkt und an der Zielroute und stellen Sie fest, dass this.props.history nach dem Sprung zur Route nach dem Sprung geworden ist, this.props.location jedoch immer noch mit der ursprünglichen Route übereinstimmt. Bei Seiten, die Komponenten normal laden, sind Verlauf und Speicherort beide dieselbe Route.

Lösung

Der Blogger Baidu hat lange verschiedene Methoden ausprobiert, bevor er den wahren Grund gefunden hat. Natürlich hat er auch viele andere interessante Methoden gewonnen.

Der wahre Grund

ist der Missbrauch von BrowserRouter im React-Router-Dom. Der Blogger lernte das Routing durch das Ansehen von Videos, daher kannte er die Funktionen nicht sehr gut, also fügte er browserRouter zum übergeordneten Routing hinzu Dann wird die untergeordnete Route auch mit der untergeordneten Route verknüpft, daher verwende ich den Browserrouter, um die untergeordnete Route zu umschließen und mit der untergeordneten Route zu verknüpfen. Auf diese Weise gibt es kein Problem beim Springen zur untergeordneten Route Es gibt kein Problem, wenn die Enkelroute zur untergeordneten Route springt. Die übergeordnete Route kann nicht geladen werden. Für die übergeordnete Route ist es kein Problem, zur untergeordneten Route und zur Enkelroute zu springen. Das ist das Merkmal dieser Grube.

Ich schätze also, dass die Routing-Informationen hauptsächlich im Browserrouter enthalten sind. Wenn der Browserrouter in der Unterroute enthalten ist, gehen die Informationen des Browserrouters der oberen Ebene verloren.

Einige andere von Baidu gewonnene Methoden: Sie können this.props.history.go() verwenden, um die Komponente zu aktualisieren. Die Zahlen in den go-Klammern stellen die vorherige Seite und die nächste Seite dar Es kann verwendet werden, wenn es aufgefrischt werden muss.

Verwenden Sie die Methode, zu einer leeren Seite zu springen und dann zurück zu springen, aber der Blogger hat es versucht und es schien nicht zu funktionieren.

Sie können forcerefresh={true} zum browserrouter-Parameter hinzufügen. Der Blogger hat es versucht und es hat dazu geführt, dass jeder Routensprung im Paket unten aktualisiert wurde. Es kann an bestimmten Stellen nützlich sein.

Sie können darin auch eine Hook-Funktion schreiben, die beim Verlassen oder Betreten dieser Route aufgerufen wird. Wenn Sie beispielsweise eine Route mit Berechtigungen eingeben, können Sie die Berechtigungsüberprüfung onEnter={myfunc} in myfunc hinzufügen. Wenn die Überprüfung nicht besteht, ersetzen Sie this.props.history und springen Sie, um den Zweck zu erreichen.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der React-Router nicht angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!