ページの更新または手動 URL 入力後に React Router が動作しないのはなぜですか?

React-router での URL の処理

更新または手動入力時に URL が機能しない

React-Router を使用する場合、次のような違いがあります。サーバー側とクライアント側のルーティングの間。通常、アプリは、React スクリプトを含む静的 HTML ファイルの最初のリクエストをサーバーに送信することで開始されます。ロードされると、クライアントは新しいサーバー リクエストを行うことなく、その後の URL 変更を処理します。

問題: サーバー側のルートに一致する URL を更新するか手動で入力する場合 (例: 、/joblist) クライアント側ルーティング モードでは、意図したビューがレンダリングされません。代わりに、「Cannot GET /joblist」エラーが発生する可能性があります。

サーバー側ルーティングとクライアント側ルーティング

サーバー側: サーバーはすべての URL を処理します。ルーティング。静的 HTML サイトでは、サーバーは /joblist などの特定の URL の HTML ページを送信します。

クライアント側ルーティング: React-Router はクライアント側で URL ルーティングを処理します。 。サーバーに新しいページをリクエストする代わりに、URL の変更に基づいて表示コンテンツを動的に更新します。

問題の解決

これを解決するには、両方のサーバーでルートを確立する必要があります。そしてクライアント側。

ハッシュ履歴 (ブラウザ履歴の前身)

このアプローチでは、/joblist#/about のように、ハッシュ (#) プレフィックスが付いた URL を使用します。ハッシュの後の部分はサーバーに送信されないため、サーバーは常にルート URL (/) を参照します。クライアント側では、React-Router が #/about 部分を処理します。

欠点:

• URL が魅力的ではない
• サーバー側のレンダリングがない、悪影響を及ぼしますSEO.

キャッチオール

サーバー上にキャッチオール ルートを設定します。たとえば、サーバーが特定のルートに一致しない URL を受信すると、index.html ファイルが送信されます。これにより、どの URL が入力されても、React アプリが確実に読み込まれます。

欠点:

• セットアップがより複雑
• SEO が最適ではない、すべてのページが同じを返すためcontent.

ハイブリッド

このアプローチでは、キャッチオールと重要なページの特定のサーバー側ルートを組み合わせます。これらのページに静的 HTML ファイルを提供すると、そのコンテンツが検索エンジンで利用できるようになります。

欠点:

• 設定がより複雑になります
• 限定的な SEO の利点
• コードの重複 (クライアントとクライアントの両方でコンテンツをレンダリングする)

Isomorphic

このアプローチでは、サーバーとクライアントの両方が同じ JavaScript コードを実行します。これにより、ページ遷移がサーバー側で発生するかクライアント側で発生するかに関係なく、同じマークアップをクライアントに送信することで問題が解決されます。

欠点:

• サーバーは JavaScript (多くの場合 Node.js) を実行する必要があります
• 環境上の課題
• 急な学習曲線

適切なソリューションの選択

次の点を考慮してください要素:

• シンプルさ: キャッチオールは比較的簡単なセットアップです。
• SEO: 同型は SEO に最適なソリューションです。ただし、さらに多くの労力が必要です。
• サーバーテクノロジー: サーバーが Node.js で実行されている場合、同型は適切な選択です。

最終的に、最適なオプションは、特定の要件と技術的能力によって異なります。

以上がページの更新または手動 URL 入力後に React Router が動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。