【解決】リロードでエラー!? ReactとExpressで404エラーになってしまった。。。

React、Expressでフロントエンドを開発している際、ブラウザをリロードをすると404エラーが生じてしまいました。

今回解決できたので、解決策と原因を振り返っておこうと思います！

解決策（ソースコード）

サーバーのルーティングの部分で、下記のコードを追加してみてください。

const path = require('path');

app.get('/*', (req, res) => {
    res.sendFile(path.join(<index.htmlへのパス>));
})

意図しない404エラーが起こる原因

問題は、特定のURLへ直接アクセスしてしまうことだったんです。

サーバーが送っているのは基本的にhtmlのみで、特定のURLに応じてコンポーネントを表示しているためだったのですよ。

クライアントだけが知ってて、サーバーはどんなURLか知らない状態になり、結果としてindex.htmlが送られない→404エラーとなるのですね！

じゃあ、サーバーが全てのエンドポイントに対してindex.htmlを返してあげれば404エラーも起きないだろう。ということで上記のルーティング処理を追記してみてください(^^)