質問

私はプログラミングの初心者なので、公式のドキュメントを読んでも少し理解しにくいところがあります。

について読んでいたのですが React Router 4はこちらから

この記事の中で、著者が話していたのは <HashRouter> と <BrowserRouter>

ということをおっしゃっていました。

HashRouter は、基本的にURLのハッシュを使用してコンポーネントをレンダリングします。私は静的な1ページのウェブサイトを構築していたので、これを使用する必要がありました。

ブラウザルーター このコンポーネントは、HTML5 の履歴 API を使用してレンダリングされます。履歴はpushStateとreplaceStateによって変更することができます。詳しくはこちらをご覧ください。

さて、私はこの2つの意義とユースケースが理解できません。 履歴はpushStateとreplaceStateで変更可能です。 と コンポーネントをレンダリングするために、URLのハッシュを使用します。

BrowserRouterの最初の説明は全く曖昧ですが、HashRouterの2番目の説明も意味不明です。なぜ誰かがコンポーネントをレンダリングするためにurlにハッシュ（#）を使うのでしょうか？

解決方法は？

BrowserRouter

を使用しています。 履歴API レガシーブラウザー（IE9以下と同世代）では使用できません。クライアント側のReactアプリケーションは、以下のようなきれいなルートを維持することができます。 example.com/react/route が、Webサーバーのバックアップが必要です。通常、このことは、ウェブサーバーが単一ページのアプリケーション用に設定されていることを意味します。 index.html は /リアクト/ルート パス、またはサーバー側の他のルート。クライアント側では window.location.pathname はReactルータで解析されます。React ルーターは、レンダリングするように設定されたコンポーネントをレンダリングします。 /react/route .

さらに、設定にはサーバーサイドレンダリングが含まれる場合があります。 index.html には、現在のルートに固有のレンダリングコンポーネントまたはデータが含まれることがあります。

HashRouter

URLハッシュを使用するため、対応ブラウザやウェブサーバに制限がありません。サーバーサイドのルーティングはクライアントサイドのルーティングから独立しています。

後方互換性のある単一ページ・アプリケーションは、以下のように使用できます。 example.com/#/react/route . この設定は、サーバーサイドレンダリングでバックアップすることができないので / のパスがサーバーサイドで提供されます。 #/react/route URLハッシュはサーバ側からは読み込めません。クライアント側では window.location.hash はReactルータで解析されます。React ルーターは、レンダリングするように設定されたコンポーネントをレンダリングします。 /react/route と同じように BrowserRouter .

最も重要なことです。 HashRouter の使用例は、SPAに限ったことではありません。ウェブサイトは、レガシーまたは検索エンジンに適したサーバーサイドのルーティングを持つかもしれませんし、Reactアプリケーションは、URLでその状態を維持するウィジェットかもしれません example.com/server/side/route#/react/route . React アプリケーションを含むいくつかのページは、サーバー側で /サーバー/サイド/ルート 次に、クライアント側で React ルーターは、次のように設定されたコンポーネントをレンダリングします。 /react/route 前のシナリオと同様です。