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）が画面を書き換え、同時にブラウザの URL も書き換えています（この際、サーバーへのリクエストは発生しません）。 そのため、404エラーは発生しません。

対応策

404 になったらエントリポイントにリダイレクトさせる。
というのが対応策になります。

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

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

// staticwebapp.config.json

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

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