Analyse : les déclencheurs de React-Router s'affichent deux fois lorsque le routage saute

Problème : lorsque les routes React-Router sautent, le rendu est déclenché deux fois, ce qui entraîne le rendu de la page à plusieurs reprises.

Cause : react-router ^3.x.x utilisé dans le projet. Lorsque React-Router saute, la valeur de this.props.location.action aura deux états. Les deux états déclencheront le rendu. La page est donc rendue deux fois.

　 1. Lorsque vous cliquez sur le lien, this.props.location.action=PUSH, 2. Lorsque le navigateur avance et recule, this.props.location.action=POP.

Ainsi, lorsque vous cliquez sur le lien, le statut est d'abord PUSH, puis le navigateur avance et recule, et le statut passe à POP.

Solution : dans la couche de routage, utilisez la fonction périodique de réaction ShouldComponentUpdate (les étudiants qui ne sont pas familiers avec le cycle de vie, veuillez vérifier les informations séparément) pour juger si this.props.location.action en vaut la peine. Déterminez si la valeur est PUSH ou POP en fonction des besoins réels du projet.

J'ai choisi POP car certaines exigences du projet nécessitent l'utilisation de window.location.hash='xxxxxxxx'. Dans ce cas, PUSH ne peut pas être déclenché, donc le saut de routage échouera.

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

Remarque : les responsables de Facebook ont ​​déclaré que cette situation est un BUG de React-Router, qui a été corrigé dans ^4.x.x.

Le contenu ci-dessus est ce que j'ai rencontré lors du développement du projet. Tout le monde rencontre des bugs différents, alors faites-le moi savoir. Merci!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!