Reactで作成したアプリをサブディレクトリに置くときにするべきこと

Reactでアプリを作成して、ルートドメイン直下以外の場所にファイルを置くと、真っ白な画面になります。なので、以下のファイルの内容を書き換えて、表示されるようにします。

homepageの欄を以下のように書き換えます。

"homepage": "/{パス}/",

例えば、example.com/foo 直下にファイルを置くなら、 “homepage”: “/foo/” とします。

これを設定しておかないと、ブラウザがindex.htmlのファイルを読み込んだあとに、cssやjsのファイルを読み込むのですが、そのファイルのパスが example.com/xxx.js などになってしまいます。

react-router-domを使ってページ遷移をする場合、BrowserRouterにbasenameを設定する必要があります。

<BrowserRouter basename={/パス/}>

package.jsonと同様に例えば、example.com/foo 直下にファイルを置くなら、 <BrowserRouter basename={/foo/}> とします。