Help us understand the problem. What is going on with this article?

react-routerのBrowserHistory使用時のリロード対策

More than 1 year has passed since last update.

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>

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした