ページのリロードでのReactJS404エラー– TecAdmin

の本番ビルドを作成したら ReactJS 応用。 アプリケーション全体にサービスを提供するindex.htmlファイルを作成します。 すべてのリクエストは、最初にindex.htmlへの履歴である必要があります。その後、ReactルーターはURLのクエリに基づいてコンテンツを提供します。 メインURLでアプリケーションにアクセスすると、ヒットします index.html 正常に動作します。 ブラウザで1つのサブURLに直接アクセスする場合、Webサーバーはその名前のファイルを見つけられません。 その場合、 404 エラーメッセージがユーザーに返されます。

問題：

本番ReactJSアプリケーションのサブURLに直接アクセスすると、Webサーバーから404エラーメッセージが返されます。

解決：

簡単な解決策は、すべてのリクエストをindex.htmlファイルにルーティングすることです。 残りのReactルーターはこれを処理します。

実行中のWebサーバーに基づいてサーバー構成を更新します。

1.Nginxユーザー

Nginxユーザーは編集できます サーバーブロック （仮想ホスト）構成ファイルを作成し、次のスニペットを追加します。 これにより、すべてのリクエストがindex.htmlファイルにルーティングされます。

#Add this in Nginx server block
location / {
  ...
  try_files $uri.html $uri $uri/ /index.html;
  ...
}

ファイルを保存して、Nginxサービスを再起動します。

2.Apacheユーザー

反応アプリケーションがApacheWebサーバーでホストされている場合。 次に、を追加できます .htaccess サイトのルートにあるファイルを作成し、次のスニペットを追加します。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

システムでApache書き換えモジュールが有効になっていることを確認してください。

結論

このチュートリアルは、ReactJS本番環境での404エラーの解決に役立ちました。