Reactでビルドしたのに直接URLをたたくと表示されない？

今回はcreate-react-appでルーティングを使ったアプリケーションをnpm run buildし指定サーバーにアップしたが直接URLを叩くと表示されない人向けの記事です。
サブディレクトリへアップするときの処理やbasenameの書き換えがまだな方はこちらの記事をご覧ください。

前提

アップ先 　/home/sample/www/sample.com/content`
URL　 https://sample.com/content

存在するルート

https://sample.com/content
https://sample.com/content/news
https://sample.com/content/about

何も設定していない状態でhttps://sample.com/content にアクセスするともちろん表示はされますね。また、リンクを押しページ遷移してもそれは表示されるはずです。
ただ、https://sample.com/content/news でリロードしたり、直接URLをたたくと真っ白なページで何も表示されないはずです。

これはSPA特有の現象です。

解決方法

.htaccessを使います。下記のように記載しReactアプリと同じ階層にアップしてください。

RewriteEngine On
RewriteBase /content/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

これだけで解決します。

解説

https://sample.com/content/news でリロードした場合サーバーは/home/sample/www/sample.com/content/news内のファイルを探すためです。シンプルですね。なので .htaccess を利用して/home/sample/www/sample.com/content/newsにアクセスされた場合は 「/content/のindex.html を見にきてね」という指示を出してあげます。
こうすることで直接URLを叩いてもリロードしても表示されるようになります。