HashRouterとBrowserRouterでReactRouter違い

唯一の個人的な理解不適切な場合、私を修正してください

まず、原則として

#HashRouterは、HTMLのアンカーの位置に対応し、パスに含まれています。# )英語のシンボルは、ハッシュ、いわゆるHashRouterと呼ばれ、ハッシュは、それがああ問題ではありません)

BrowserRouterは、ブラウザの低いバージョンはサポートしていないことが、一般的な目的として、HTML5の歴史、無HashRouter(アンカー位置)の新機能を使用して。

用法から第二に、

もしHashRouter(手動スプライシングない限り、URL文字列)アセンブリBrowserRouter時間ジャンプするための構成要素との間の通信のための任意のパラメータを渡すことはできませんが、それは一般Reduxの、コンポーネント間のデータ通信に使用されます。

第三に、生産の練習

1.HashRouter

 アンカー位置にHashRouter相当は、そのかかわらず、#パスの後ろにどのように変化する、要求は#の前にそのページに相当します。前後端を容易に配備(包装又は公共静的にファイルサーバの、すなわちフロントエンド)を単離することなく行うことができます

リンクは、IP要求されているのでアドレス:ポート/#/ XXXX、したがって、要求されたリソースのパスは/、同等のindex.htmlに常にあり、そして他のバックエンドAPIインタフェースは、通常の要求とすることができ、しません/衝突、フロントとリアエンドクロスドメインの問題を単離することなく発生しません。

欠点は赤ちゃん表現強迫性障害がコミットパス#が常にある、醜いです...

2.BrowserRouter

要求されたモードリンクはBrowserRouter IPアドレスの下にあるので:バックエンドルートで404エラーをしますカバーしていない場合は、各URLにポート/ XXXX / XXXX、ひいては対応は、異なるバックエンドのアドレスにアクセスします。

サーバ側のルート上にミドルウェアを追加することによって解決することができ、以前のAPIインタフェースが一致しない場合のindex.htmlページが返され、最後に一致します。彼らは、ルーティングルーティングのURLを繰り返すことはできませんフロントエンドとバックエンドを必要とするためしかし、これはまた、いくつかのマイナーな問題があります。

例えば、商品/製品/リストと呼ばれる部品、商品のリストのリストは、それがページにアクセスしません、APIである/製品/リストを要求しますが、APIインタフェースが一致します。

ソリューション:

ポート1、後端インタフェースアドレスIP2:ポート2、リバースプロキシサーバnginxの配信要求を使用してこのような初期アドレスIP1として分離の終わりの展開、前後。URLは、プロジェクトへのアクセス単に訪問し、フロントエンドにバックエンドインターフェイス、または転送先アドレスに転送APIで始まる場合、バックエンドサーバへのフロントエンドは、nginxの設定ファイルによって判断すると、nginxの+ / API / xxxのURLに対する要求を開始しましたnginxのサーバー。

 

おすすめ

転載: www.cnblogs.com/flamestudio/p/11965991.html