react-routerのBrowserHistory使用時にリロードすると404になるのを防ぐ

まず、私の環境ですが、
webpack、Express、react/redux、react-routerを使用しています。
サーバもExpressを使用して自分で作っています。

  • 1. 404対策にサーバ側ファイルに以下を記述 (ルーティングの最下層に記載)
// publicの部分は適宜変更してください。

app.get('*', (req, res) => res.sendfile(path.join(__dirname, '../public', 'index.html')));
  • 2. それだけだと、正しくjsファイルを読み込まないので、bundle.jsファイルを読み込むパスを絶対パスで記載する(index.htmlのバンドルを読み込んでいる部分です。)
// bundle.jsのパスも適宜修正してください。絶対パスで正しく記入されて入れば大丈夫です。
<script src="/js/bundle.js"></script>

私の環境では、以上を行うだけで対応完了しました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.