💻

React RouterのBrowserRouterとHashRouterの違い

に公開
React
SEO
TypeScript
HTML 5
ルーティング
tech

はじめに

React Routerを使ってSPA(Single Page Application)を構築するとき、ルーティングの方法として BrowserRouter と HashRouter を選べます。
どちらもURLによって画面を切り替える機能ですが、その違いを解説します。

BrowserRouterとは

特徴

  • HTML5の History API を利用してルーティングを実現する
  • URLは通常のパス形式(/about や /users/123)になる
  • 見た目がシンプルでSEOに強い

メリット

  • URLが直感的
  • サーバーサイドレンダリング(SSR)との相性が良い
  • パラメータやクエリの扱いがわかりやすい

デメリット

  • サーバーの設定が必要(例: 直接/aboutにアクセスした場合、サーバーが正しくindex.htmlを返す必要がある)
  • 設定をしていないと 404エラー が発生することがある

HashRouterとは

特徴

  • URLの #(ハッシュ) を使ってルーティングを実現する
  • 例: https://example.com/#/about
  • サーバー設定が不要でどの環境でも動く

メリット

  • サーバー側の特別な設定が不要
  • GitHub PagesやS3など静的ホスティング環境でそのまま使える

デメリット

  • URLに「#/」が含まれるため見た目がやや不自然
  • SEOに弱い(検索エンジンによっては正しくクロールされない場合がある)
  • SSRとの相性が悪い

使い分けの目安

  • BrowserRouterが適している場合

    • 商用サービスや本番アプリ
    • SSRを利用する場合
    • SEOが重要な場合

  • HashRouterが適している場合

    • 簡易的なアプリや社内ツール
    • サーバー設定を変えられない環境(GitHub Pages, S3静的ホスティングなど)
    • 学習用のプロジェクト

まとめ

  • BrowserRouter → URLが自然、SEO向き、ただしサーバー設定が必要
  • HashRouter → サーバー設定不要、ただしSEOに弱い

用途によってどちらを選ぶか決めましょう。

Discussion