React react-router-dom の注意点

プログラミング
公開: 2024年11月15日

注意点

react-router-dom を使用すれば、URLに紐づいたルーティングを実装できる。
ただし、開発環境(Vite)と運用環境では動作が違う。

運用環境で、Link タグを使用してマウスでリンク(例 https://hoge.com/test)を踏んだ場合は適切にルーティングされるが、同じURL(https://hoge.com/test)をブラウザに直接入力すると 404 NotFound のエラーとなる。
これは、URLを直接入力した場合、Webサーバーが「/test」というファイルを探しに行くため。
「/test」というファイルはないので、404 NotFound となる。
マウスでリンクをクリックした場合は、React(JavaScript)が画面を書き換え、同じく React(JavaScript)がブラウザの URL を書き換えている。(つまり、サーバーへのリクエストは発生しない)
そのため、404エラーは発生しない。

対応策

Azure の静的 Web アプリを使用する場合は、 public フォルダ直下に staticwebapp.config.json ファイルを作成する。

404 になるリクエストはすべてエントリポイント (通常は index.html) にリダイレクトさせる。

// staticwebapp.config.json

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

※開発環境(Vite)で404が発生しないのは、おそらく Vite が同様のリダイレクトを行っているため。