ReactRouterでのHashRouterとBrowserRouterの違い

個人のみのご理解ですので、ご不明な点がございましたらご指摘ください
一、原理上
HashRouterはパスに#を含み、HTMLのアンカー位置に相当します.(#符号の英語はhashというのでHashRouterというのですが、ハッシュとは関係ありませんよ))
一方、BrowserRouterはHTML 5の新機能Historyを使用しており、HashRouter(アンカー位置)のように汎用的ではなく、低バージョンブラウザではサポートされていない可能性があります.
二、使い方から
BrowserRouterはコンポーネントのジャンプ時に任意のパラメータを渡してコンポーネント間の通信を実現することができるが、HashRouterは(URL文字列を手動で接続しない限り)できないため、Reduxと組み合わせて使用し、コンポーネント間のデータ通信を実現するのが一般的である.
三、生産実践
1.HashRouter
HashRouterはアンカー位置に相当するので、#の後ろのパスがどのように変化しても、要求されたのは#の前のページに相当します.前後端が分離しない配置(つまりフロントエンドがパッケージ化されたファイルをサーバ側のpublicやstaticに入れる)を容易に行うことができ、
要求のリンクはすべてipアドレス:ポート/#/xxxxであるため、要求のリソースパスは常に/であり、indexに相当する.htmlは、他のバックエンドAPIインタフェースが正常に要求され、前後端が分離されていないため、ドメイン間の問題は発生しません.
欠点は丑くて、経路の中でいつも#があって、赤ちゃんは强迫症が犯したことを表しています...
2.BrowserRouter
BrowserRouterモードで要求されるリンクはすべてipアドレス:ポート/xxxx/xxxxxxであるため、各URLに相当して異なるバックエンドアドレスにアクセスし、バックエンドがルーティングに上書きされていないと404エラーが発生する.
ミドルウェアを組み込むことで解決する、サーバ側のルーティングマッチングの最後に置く、前のAPIインタフェースが一致しなければindexに戻ることができる.htmlページ.しかし、フロントエンドルーティングとバックエンドルーティングを要求するURLが重複しないため、いくつかの小さな問題もある.
例えば、商品リストコンポーネントは/product/listと呼ばれ、商品リストを要求するAPIも/product/listであると、ページにアクセスできず、APIインタフェースによってマッチングされる.
解決方法:
フロントエンドアドレスip 1:ポート1,バックエンドインタフェースアドレスip 2:ポート2のようなフロントエンド分離の導入を行い,Nginx逆プロキシサーバを用いてリクエスト配信を行う.フロントエンドからバックエンドへの要求を開始するURLはnginxが存在するサーバ+/api/xxxであり、NGINXのプロファイルで判断し、URLがapiで始まるとバックエンドインタフェースに転送し、そうでなければフロントエンドのアドレスに転送し、アクセス項目はNginxサーバにアクセスするだけでよい.