ビルド
本番用ビルド
yarn build
Web サーバの設定
404 エラー時の Fallback の設定
React で表示される URL はクライアントサイドで生成されたものであり、サーバサイドに存在しているものではない。そのため、直リンクをされたり、ブラウザでリロードされたりすると、404 エラーとなる。
Node.js の開発用サーバなどは適切にハンドリングしてくれるが、本番デプロイをする対象の Web サーバはそうではない場合も多い。そのため、404 エラーが発生した場合に、React の実在するページ(index.html など)にリダイレクトする、といった設定を行っておく必要がある。
例えば、Github Pages を React のホスティングに使う場合は、404.html を作成して meta タグの refresh でトップページにリダイレクトさせることができる。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1; URL=./index.html">
<title>404 Not Found</title>
</head>
<body>
404 Not Found
</body>
</html>