JavaScript, React Router, ルートでスムーズなページ内移動を実現する「アンカー」の使い方

2024-06-27

React Router でアンカーを使用する

2 種類のアンカーがあります:

ハッシュリンク: ハッシュリンクは、# 記号とセクションの ID を使用して、ページ内の特定の要素にリンクします。例：

<a href="#section1">セクション1へ移動</a>

仮想リンク: 仮想リンクは、react-router の Link コンポーネントを使用して、別のページ内のセクションにリンクします。例：

<Link to="/about#history">会社の歴史</Link>

どちらのアンカーを使用するかを決める方法:

同じページ内のセクションに移動する場合: ハッシュリンクを使用します。

ハッシュリンクを使用する方法:

react-router-dom パッケージをインストールします。

npm install react-router-dom

Link コンポーネントをインポートします。

import { Link } from 'react-router-dom';

Link コンポーネントに to と hash プロパティを設定します。

<Link to="/about#history">会社の歴史</Link>

リンク先のセクションに ID を設定します。

<section id="history">
  <h2>会社の歴史</h2>
  <p>...</p>
</section>

npm install react-router-dom

import { Link } from 'react-router-dom';

<Link to="/about#history">会社の歴史</Link>

補足:

ページ内のセクションにスムーズにスクロールするには、react-scroll などのライブラリを使用できます。
アンカーを使用して、モバイルデバイスでネイティブなスクロール動作を無効にすることができます。

React Router でアンカーを使用する：サンプルコード

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Scrollchor from 'react-scrollchor';

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">会社概要</Link>
        <Link to="/contact">お問い合わせ</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
      <Scrollchor to="#section1">
        <a>セクション1へ移動</a>
      </Scrollchor>
      <section id="section1">
        <h2>セクション1</h2>
        <p>...</p>
      </section>

      <Scrollchor to="#section2">
        <a>セクション2へ移動</a>
      </Scrollchor>
      <section id="section2">
        <h2>セクション2</h2>
        <p>...</p>
      </section>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>会社概要</h1>
      <Link to="/about#history">会社の歴史</Link>
      <Link to="/about#team">チーム</Link>

      <section id="history">
        <h2>会社の歴史</h2>
        <p>...</p>
      </section>

      <section id="team">
        <h2>チーム</h2>
        <p>...</p>
      </section>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <h1>お問い合わせ</h1>
      <p>...</p>
    </div>
  );
};

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

このコードの説明:

index.js ファイルは、React アプリケーションのエントリーポイントです。
BrowserRouter コンポーネントは、React Router を使用するようにアプリケーションを設定します。
Routes と Route コンポーネントは、アプリケーションのルーティングを定義します。
Link コンポーネントは、別のページへのリンクを作成します。
Scrollchor コンポーネントは、ハッシュリンクを使用してページ内の特定のセクションにスムーズにスクロールできるようにします。

このコードを実行するには:

npm install react react-router-dom react-scroll

index.js ファイルを実行します。

node index.js

ブラウザで http://localhost:3000 にアクセスします。

このサンプルコードを参考に、独自の React アプリケーションでアンカーを実装してください。

React Router でアンカーを使用する：その他の方法

カスタムフックを使用して、アンカーのロジックをカプセル化することができます。これにより、コードをより整理し、再利用しやすくなります。

例:

import { useState, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

const useAnchor = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [hash, setHash] = useState('');
  const ref = useRef(null);

  const handleLinkClick = (event) => {
    const { hash } = event.target;
    setHash(hash);

    if (ref.current) {
      ref.current.scrollIntoView({ behavior: 'smooth' });
    } else {
      navigate(`${location.pathname}${hash}`);
    }
  };

  return {
    hash,
    ref,
    handleLinkClick,
  };
};

const MyComponent = () => {
  const { hash, ref, handleLinkClick } = useAnchor();

  return (
    <div>
      <a href="#section1" onClick={handleLinkClick}>セクション1へ移動</a>
      <a href="#section2" onClick={handleLinkClick}>セクション2へ移動</a>

      <section id="section1" ref={ref}>
        <h2>セクション1</h2>
        <p>...</p>
      </section>

      <section id="section2">
        <h2>セクション2</h2>
        <p>...</p>
      </section>
    </div>
  );
};

第三者ライブラリを使用する:

react-router-hash-link や react-anchor などのライブラリを使用して、アンカーの機能を拡張することができます。これらのライブラリは、追加の機能やオプションを提供することがあります。

import { Link as HashLink } from 'react-router-hash-link';

const MyComponent = () => {
  return (
    <div>
      <HashLink to="/about#history">会社の歴史</HashLink>
      <HashLink to="/about#team">チーム</HashLink>

      <section id="history">
        <h2>会社の歴史</h2>
        <p>...</p>
      </section>

      <section id="team">
        <h2>チーム</h2>
        <p>...</p>
      </section>
    </div>
  );
};

JavaScript コードを使用して、アンカーを手動で処理することもできます。ただし、この方法は、React Router の機能を使用するよりも複雑で、メンテナンスが難しくなる可能性があります。

const MyComponent = () => {
  const handleLinkClick = (event) => {
    const { hash } = event.target;
    const element = document.querySelector(hash);

    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div>
      <a href="#section1" onClick={handleLinkClick}>セクション1へ移動</a>
      <a href="#section2" onClick={handleLinkClick}>セクション2へ移動</a>

      <section id="section1">
        <h2>セクション1</h2>
        <p>...</p>
      </section>

      <section id="section2">
        <h2>セクション2</h2>
        <p>...</p>
      </section>
    </div>
  );
};