症状
create-react-appを使って、プロジェクトを作成・開発して、npm startした時は、正しくコンポーネントが描画されるのですが、npm run buildすると何も描画されず、真っ白な画面しか表示されない現象に出くわしました。
その上、build時にはエラーは出ず、successしてしまうので原因の見当がつかず困りました。
環境
package.jsonのdependenciesは以下の通り。
"history": "^4.9.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-redux": "^5.0.6", "react-router-dom": "^5.0.0", "react-router-hash-link": "^1.2.1", "react-router-redux": "^5.0.0-alpha.9", "react-scripts": "^2.1.8", "redux": "^4.0.1", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0"
原因
ページの遷移にReact Routerを使っていたのですが、React Router V4からbuildする時には、BrowserRouterが使えないようで、これが原因でした。
この情報がなかなか見つけられず、骨が折れました。
解決できたのは、React学習用に買ったReact入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
にあったTipsに「GitHub PageにAppを公開する際は、BrowserHistoryだと動かない」という内容の記事を見つけて、試しにHashRouterに変更してbuildしたら動いたという幸運にめぐまれました。
React入門
にあったTipsをもう少し詳しく説明するとnpm startした時は、サーバが立ち上がり、どのようなURLのリクエストでもindex.htmlを返してくれる機能があるが、GitHub Pageではそのような対応をしてくれないため、Hash Historyを利用して、URLに「#」をつけて、ルートにあるindex.htmlを返すようにするということです。
このせいか、React Routerの仕様もBrowserRouterを使っていると機能しないようになっているのかもしれません。（本当のところは、わかりませんが。）
BrowserRouter使ってbuildしたい
HashRouterを使うとURLに「#」が入ってしまうのが、やっぱり気になります。少しだけ調べたのですが、Next.jsを使ってサーバーサイドレンダリングをする。もしくは、buildをreact scriptではなくwebpackを使ってバンドルしhistoryApiFallback を webpack.config.js に追加する方法があるようですが、まだ試していません。試した時は、また記事にしたいと思います。