React Router チュートリアル: HashRouter と BrowserRouter

2024-04-02

React Routerにおける HashRouter と BrowserRouter の違い

URLの形式

HashRouter は、URLにハッシュフラグメント（# 記号以降の部分）を使用してルーティングを行います。例えば、 /home への遷移は /#/home のようなURLになります。

ブラウザの履歴

HashRouter は、ブラウザの履歴機能に影響を与えません。つまり、ユーザーがブラウザの戻るボタンを押しても、画面遷移は起こりません。

一方、BrowserRouter は、ブラウザの履歴機能と連動します。ユーザーがブラウザの戻るボタンを押すと、前の画面に戻ることができます。

サーバー設定

HashRouter は、サーバー側の設定を必要としません。静的なファイルのみで構成されるWebサイトにも使用できます。

一方、BrowserRouter は、サーバー側で適切な設定を行う必要があります。これは、BrowserRouter がHTML5の history APIを使用するためです。

使用例

HashRouter は、以下の場合に使用されます。

静的なファイルのみで構成されるWebサイト
ブラウザの履歴機能を使用しないWebサイト
レガシーなブラウザをサポートする必要があるWebサイト

サーバー側の設定が可能なWebサイト
最新のブラウザのみをサポートするWebサイト

まとめ

HashRouter と BrowserRouter は、それぞれ異なる利点と欠点があります。プロジェクトの要件に合わせて、適切なルーターコンポーネントを選択する必要があります。

以下は、それぞれのルーターコンポーネントを選択する際の指針です。

HashRouter を選択する:

補足

HashRouter と BrowserRouter は、react-router-dom パッケージに含まれています。

HashRouter の例

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route } from 'react-router-dom';

const App = () => (
  <HashRouter>
    <div>
      <h1>HashRouter Example</h1>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </HashRouter>
);

const Home = () => <h1>Home</h1>;

const About = () => <h1>About</h1>;

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

BrowserRouter の例

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      <h1>BrowserRouter Example</h1>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
);

const Home = () => <h1>Home</h1>;

const About = () => <h1>About</h1>;

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);