Analyse: React-Router-Trigger werden beim Routing von Sprüngen zweimal gerendert

Problem: Wenn React-Router springt, wird das Rendern zweimal ausgelöst, wodurch die Seite wiederholt gerendert wird.

Grund: React-Router ^3.x.x im Projekt verwendet. Wenn der React-Router springt, hat der Wert von this.props.location.action zwei Zustände. Beide Zustände lösen das Rendern aus. Die Seite wird also zweimal gerendert.

1. Wenn auf den Link geklickt wird, this.props.location.action=PUSH, 2. Wenn sich der Browser vorwärts und rückwärts bewegt, this.props.location.action=POP.

Wenn also auf den Link geklickt wird, lautet der Status zuerst PUSH, dann bewegt sich der Browser vorwärts und rückwärts und der Status ändert sich in POP.

Lösung: Verwenden Sie in der Routing-Ebene die periodische Reaktionsfunktion ShouldComponentUpdate (Studenten, die mit dem Lebenszyklus nicht vertraut sind, überprüfen Sie die Informationen bitte separat), um zu beurteilen, ob sich this.props.location.action lohnt. Bestimmen Sie entsprechend den tatsächlichen Anforderungen des Projekts, ob der Wert PUSH oder POP ist.

Ich habe mich für POP entschieden, da einige Anforderungen im Projekt die Verwendung von window.location.hash='xxxxxxxx' erfordern. In diesem Fall kann PUSH nicht ausgelöst werden, sodass der Routing-Sprung fehlschlägt.

1 shouldComponentUpdate() {2         // POP 浏览器前进后退， PUSH 点击Link3         return this.props.location.action === "POP"4 }

Hinweis: Facebook-Beamte sagten, dass es sich bei dieser Situation um einen FEHLER von React-Router handelt, der in ^4.x.x behoben wurde.

Der obige Inhalt ist der, auf den ich während der eigentlichen Projektentwicklung gestoßen bin. Jeder stößt auf unterschiedliche Fehler, also lassen Sie es mich bitte wissen. Danke!

Das obige ist der detaillierte Inhalt vonAnalyse: React-Router-Trigger werden beim Routing von Sprüngen zweimal gerendert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!