分析: ジャンプのルーティング時に React-Router トリガーが 2 回レンダリングされる

問題: React-Router がジャンプすると、レンダリングが 2 回トリガーされ、ページが繰り返しレンダリングされます。

理由: プロジェクトで使用されているreact-router ^3.x.x。 React-router がジャンプすると、this.props.location.action の値には 2 つの状態があります。どちらの状態でもレンダリングがトリガーされます。したがって、ページは 2 回レンダリングされます。

1. リンクをクリックすると this.props.location.action=PUSH、 2. ブラウザが前後に移動すると this.props.location.action=POP となります。

そのため、リンクをクリックすると、最初はステータスがPUSHになり、次にブラウザが前後に移動し、ステータスがPOPに変わります。

解決策: ルーティング層で、react 定期関数 shouldComponentUpdate (ライフサイクルに詳しくない学生は、別途情報を確認してください) を使用して、this.props.location.action が価値があるかどうかを判断します。プロジェクトの実際のニーズに応じて、値が PUSH であるか POP であるかを決定します。

プロジェクトの一部の要件で window.location.hash='xxxxxxxx' を使用する必要があるため、POP を選択しました。この場合、PUSH をトリガーできないため、ルーティング ジャンプは失敗します。

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

注: Facebook 関係者は、この状況は、react-router のバグであり、^4.x.x で修正されていると述べました。

上記の内容はすべて私が実際のプロジェクト開発中に遭遇したものですので、遭遇するバグは人それぞれですので、ぜひ教えてください。ありがとう！

以上が分析: ジャンプのルーティング時に React-Router トリガーが 2 回レンダリングされるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。