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はは（あなたが引用しmozillaのドキュメントからの）新しいHTTP呼び出しことはありません。

注ブラウザがpushState（）を呼び出した後、このURLをロードしようとしないことを、しかし、ユーザーがブラウザを再起動した後など、後でURLをロードしようとする可能性があります。

window.location.href = "url"は、新しい場所にブラウザをナビゲートするので、は新しいHTTP要求を行いん。 注：新しいurlをハッシュフラグメントとして指定する場合は例外です。そして、窓がちょうどアンカー

---

対応にスクロールされますが、オープンネットワーク]タブを持つデベロッパーツールのコンソールからそれらを実行しているの両方をチェックすることができます。 「ログの保存」オプションを有効にしてください。 「ネットワーク」タブには、すべての新しいhttp要求がリストされます。

Answer 2

これは、コンソールのネットワークでテストできます。反応ルータで履歴を使用すると、アプリケーション内で更新は行われません（http要求なし）。これは、より良いUXの流れと状態の永続性のために使用します。私の理解では、基本的にurl（httpリクエストなし）を変更しており、反応ルータはこのプログラム変更に応じてパターンマッチングを使用してコンポーネントをレンダリングします。

Answer 3

私は反応ルータv3でbrowserHistoryを使用します。リフレッシュは行われず、アプリケーションの状態は全体にわたって維持されます。 リダイレクトするには、アプリケーションのルート設定にマップされているのは、ただbrowserHistory.push('\componentPath')のcomponentPathです。

これまでのところ問題はなかったが、魅力的な作品。 このヘルプが必要です。