Reactでパンくずリストを実装する方法

Reactでパンくずリストを実装する方法

Reactでパンくずリストを実装する方法をTypeScriptを使って紹介します。

import React from 'react';
import { useLocation, Link } from 'react-router-dom';

interface BreadcrumbItem {
  name: string;
  path: string;
}

const Breadcrumbs: React.FC = () => {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter((x) => x);

  const breadcrumbs: BreadcrumbItem[] = pathnames.map((_, index) => {
    const path = /${pathnames.slice(0, index + 1).join('/')};
    return {
      name: pathnames[index],
      path,
    };
  });

  return (
    <nav>
      <ol>
        <li>
          <Link to="/">Home</Link>
        </li>
        {breadcrumbs.map((breadcrumb, index) => (
          <li key={index}>
            <Link to={breadcrumb.path}>{breadcrumb.name}</Link>
          </li>
        ))}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;

説明

useLocation
React RouterのuseLocationフックを使用して現在のURLを取得します。
BreadcrumbItem
パンくずリストの各項目のためのインターフェースを定義します。
pathnames
現在のパスをスラッシュで分割し、空の部分をフィルタリングして配列を作成します。
breadcrumbs
パス名の配列をループして、各項目の名前とパスを持つオブジェクトの配列を作成します。
レンダリング
パンくずリストの各項目をリンクとしてレンダリングします。

このコードはReact Routerを前提としているので、必要に応じてReact Routerをインストールしてください。

npm install react-router-dom
# または
yarn add react-router-dom