React の HashRouter コンポーネント

React は、スタイリッシュな UI を備えた最新の高速アプリケーションを構築できるライブラリです。 ルーティングは、ユーザー向けアプリケーションの重要な機能の 1つです。

React では、react-router ライブラリを使用して、ユーザーがルーティング機能を実装することでアプリをナビゲートできるようにします。

React の <HashRouter> コンポーネント

<HashRouter> は <Router> コンポーネントのサブタイプで、ハッシュ値 (window.location.hash で利用可能) を使用して、URL の変更に基づいてアプリケーションの UI を更新します。 コンポーネントはハッシュ記号を使用するため、その名前が付けられます。 この記号に続くものはすべて、サーバー リクエストで無視されます。

ハッシュ値を使用してコンポーネントを条件付きでレンダリングするため、<HashRouter> は古いブラウザーと新しいブラウザーをサポートします。 <HashRouter> を使用したクライアント側のルーティングは、サーバー側のルーティングから切り離されます。

たとえば、サーバー リクエストが www.sample.com/#/category/home の場合、サーバーが受け取る最終的なリクエストは www.sample.com になり、サーバー側のルーティングは次のページをレンダリングします。 www.sample.com、ハッシュ記号の後の部分を含む URL 全体ではありません。

代わりに、<HashRouter> コンポーネントを使用して、ハッシュ記号の後の URL に基づいて UI を変更できます。 これはクライアント側で行われます。

<HashRouter> と <BrowserRouter> をいつ使用するかについて詳しくは、この記事 をお読みください。

<HashRouter> コンポーネントを実際に使用する方法をよりよく理解するために、次の基本的な例を見てみましょう。

import "./styles.css";
import { HashRouter, Link } from "react-router-dom";
export default function App() {
  return (
    <HashRouter basename="/">
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Link to="/category1">hello</Link>
      </div>
    </HashRouter>
  );
}

react-router-dom ライブラリから、<HashRouter> と <Link> という 2つのカスタム コンポーネントをインポートしました。 アプリケーション全体を <HashRouter> カスタム コンポーネントでラップしました。

現在の URL から "/category1" パスにユーザーを移動させるコンテナーに <Link> コンポーネントを追加しました。

この ライブ デモ をチェックして、実際にどのように機能するかを確認してください。

ご覧のとおり、<HashRouter> コンポーネントには basename 属性が単純に "/" に設定されています。 このため、このアプリのホームページは https://bweuok.csb.app/#/ です。

リンクをクリックすると、https://bweuok.csb.app/#/category1 パスに移動します。