PHPホスティングにおけるReact Router

ご存知の通り、ビルド後のReactプロジェクトは 通常の静的ファイルとなり、 任意のホスティングにアップロードすれば すぐに動作します。

しかし、React Routerには問題があります。 Routerは動作中にブラウザのURLを変更します。 この時、ページは実際には再読み込みされず、 JavaScriptによってURLのみが変更されるのです。

ホスティングにアップロードされたサイトでは、 Routerは動作します。しかし、メインページ以外の サイトのどのページにいても、それを再読み込みすると、 404エラーが発生します。

これは理にかなっています。ブラウザは指定されたURLの ファイルを探そうとします。これは静的サイトの通常の動作です。 私たちのアプリケーションではそのようなページは存在しません。 なぜなら、それらをシミュレートしているだけで、 実際にはすべてのアプリケーションが index.html上で動作しているからです。

この問題を解決するには、実際に存在するファイルに 向かわないすべてのURLが index.htmlにリダイレクトされるように する必要があります。これはホスティング上で動作する Webサーバーの機能を使って行われます。

仮想ホスティングはPHPで動作しています。 通常、サーバーとしてApacheが使用されます。 そこでは特別なファイル.htaccessが利用可能で、 これを使ってリダイレクトを設定できます。

これを行うには、あなたのサイトのルートに 以下の内容のファイル.htaccessを 配置する必要があります：