React react-router-dom の注意点

注意点

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 が同様のリダイレクトを行っているため。