분석: React-Router는 라우팅 점프 시 렌더링을 두 번 트리거합니다.

문제: React-Router가 점프하면 렌더링이 두 번 트리거되어 페이지가 반복적으로 렌더링됩니다.

이유: 프로젝트에서 React-router ^3.x.x를 사용했습니다. 반응 라우터가 점프할 때 this.props.location.action 값은 두 가지 상태를 갖습니다. 두 상태 모두 렌더링을 트리거합니다. 따라서 페이지가 두 번 렌더링됩니다.

　 1. 링크 클릭 시 this.props.location.action=PUSH, 2. 브라우저가 앞뒤로 이동 시 this.props.location.action=POP.

　 그래서 링크를 클릭하면 먼저 PUSH 상태가 되고, 브라우저가 앞뒤로 움직이며 POP 상태로 변경됩니다.

해결책: 라우팅 레이어에서 반응 주기 함수 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 관계자는 이 상황이 ^4.x.x에서 수정된 반응 라우터의 버그라고 말했습니다.

　 위 내용은 모두 실제 프로젝트 개발 중에 겪은 내용이므로 모두가 다른 버그에 직면하게 되니 꼭 알려주세요. 감사해요!

위 내용은 분석: React-Router는 라우팅 점프 시 렌더링을 두 번 트리거합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!