window.location.href와 history.pushState - 어느 것을 사용합니까?

Question

나는 스스로에게 react-router을 가르치고 있으며, 이제 다른 페이지로 가기 위해 어떤 방법을 사용해야하는지 궁금합니다.

this post (Programmatically navigate using react router)에 따르면 this.props.history.push('/some/path')으로 다른 페이지로 이동할 수 있습니다.

그러나 나는 window.location.href과 history.pushState의 차이점에 대해 잘 모르겠습니다.

내가 이해하는 한, window.location.href = "/blah/blah";은 브라우저를 새로 고치는 새로운 HTTP 호출을 작성하여 다른 페이지로 안내합니다.

반면에 history.pushState (및 this.props.history.push('/some/path'))은을 으로 푸시합니다. 이것은 적절하게 HTTP 참조자를 변경하므로 결과적으로 업데이트는 XMLHttpRequest입니다. 여기

는() history.pushState를 사용 mozila's documentation...

에서 발췌 한 것입니다 당신이 상태를 변경 한 후 생성 된 XMLHttpRequest의 개체에 대한 HTTP 헤더에 사용됩니다 레퍼러를 변경합니다.

내게는 두 가지 방법으로 새로운 HTTP 호출을하는 것처럼 들립니다. 그렇다면 차이점은 무엇입니까?

모든 조언을 주시면 감사하겠습니다.

PS는

나는 개발자가 다른 페이지로 이동하는 방법을 결정하기 전에, 서버에서 데이터를 얻을 것이 필요 여부를 고려 할 필요가 있다고 생각했다.

서버에서 데이터를 검색해야하는 경우 새 HTTP 호출을하므로 window.location.href은 이됩니다. 그러나 <HashRouter>을 사용하거나 속도 향상을 위해 페이지를 새로 고치지 않으려면 좋은 방법이 무엇입니까?

이 질문은 나를이 게시물로 이끌었습니다.

Answer 1

history.pushstate는은 (당신이 인용 모질라 문서에서) 새로운 HTTP 호출하지 않습니다

주 브라우저가 pushState()를 호출 한 후이 URL을로드하려고하지 않습니다,하지만 예를 들어 사용자가 브라우저를 다시 시작한 후에 URL을 나중에로드하려고 시도 할 수 있습니다.

window.location.href = "url" 새로운 위치로 브라우저를 탐색, 그래서 새로운 http 요청을하지 않습니다. 참고 : 새 URL을 해시 조각으로 지정하면 예외입니다. 그런 다음 창이 그냥 당신이 모두 열려있는 네트워크 탭을 가진 DevTools로 콘솔을 실행 확인할 수 있습니다 해당 앵커

---

로 스크롤됩니다. "로그 보존"옵션을 활성화하십시오. 네트워크 탭은 모든 새로운 http 요청을 나열합니다.

Answer 2

콘솔의 네트워크에서이를 테스트 할 수 있습니다. 반응 라우터에서 기록을 사용할 때 앱에서 새로 고침이 수행되지 않습니다 (http 요청 없음). 더 나은 UX 흐름과 상태 지속성을 위해이 옵션을 사용하십시오. 내 이해를 위해, 우리는 본질적으로 (HTTP 요청없이) URL을 수정하고 반응 라우터는 패턴 매칭을 사용하여이 프로그래밍 방식 변경에 따라 구성 요소를 렌더링합니다.

Answer 3

나는 react-router v3에서 browserHistory을 사용합니다. 새로 고침이 없으며 전체적으로 응용 프로그램 상태가 유지됩니다. 리디렉션하려면 응용 프로그램의 경로 구성에 매핑 된 componentPath가 단지 browserHistory.push('\componentPath')입니다.

지금까지 문제가 없었던 것은 매력과 같습니다. 도움이 되길 바랍니다.