Analysis: React-Router triggers render twice when routing jumps

Problem: When React-Router jumps, render is triggered twice, causing the page to be rendered repeatedly.

Reason: react-router ^3.x.x used in the project. When react-router jumps, the value of this.props.location.action will have two states. Both states will trigger render. So the page is rendered twice.

　 1. When the Link is clicked, this.props.location.action=PUSH, 2. When the browser moves forward or backward, this.props.location.action=POP.

So when the Link is clicked, the status is PUSH first, then the browser moves forward and backward, and the status changes to POP.

Solution: In the routing layer, use the react periodic function shouldComponentUpdate (students who are not familiar with the life cycle, please check the information separately) to judge whether this.props.location.action is worth it. Determine whether the value is PUSH or POP according to the actual needs of the project.

I chose POP because some requirements in the project require the use of window.location.hash='xxxxxxxx'. In this case, PUSH cannot be triggered, so the routing jump will fail.

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

Note: Facebook official said that this situation is a BUG of react-router, which has been fixed in ^4.x.x.

The above contents are all what I encountered during actual project development. Everyone encounters different BUGs, so please let me know. Thanks!

The above is the detailed content of Analysis: React-Router triggers render twice when routing jumps. For more information, please follow other related articles on the PHP Chinese website!