【React】パンくずリストを実装してみた！

React(Next.js)でパンくずリストを作ったのでアウトプットしてみます。

// Next.js と React の必要なパーツをインポート
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
// MUI（Material-UI）から HomeIcon をインポート
import HomeIcon from '@mui/icons-material/Home';

// Breadcrumb コンポーネントの定義
const Breadcrumb = () => {
    // 現在のルート（URL）に関する情報を取得
    const router = useRouter();
    // 各パスセグメントを結合するための変数
    let joinedPath = "";

    return (
        <div className="flex items-center text-sm px-4 w-full">
            {/* ホームアイコンとして "/" へのリンクを表示 */}
            <Link href="/">
                <HomeIcon className="text-gray-500 hover:text-gray-600" />
            </Link>
            {/* 現在のURLを「/」で分割し、各パスセグメントを処理 */}
            {router.asPath.split("/").map((path, index) => {
                // パスが空でない場合のみ処理
                if (path) {
                    // 現在のパスセグメントを joinedPath に追加
                    joinedPath += path + "/";
                    return (
                        // 各パスセグメントをクリック可能なリンクとして表示
                        <Link key={index} href={`/${joinedPath}`}>
                            <span className="text-gray-500 mx-2">/</span> {path}
                        </Link>
                    );
                }
            })}
        </div>
    );
};

// Breadcrumb コンポーネントをエクスポート
export default Breadcrumb;

全体のコードはこんな感じで、TailWindCSSでスタイリングしています。

まずは useRouter フックを使用して、現在のルート（URL）に関する情報を取得しています。

続いてロジック部分は、

joinedPath という変数を空文字列として初期化しています。

この変数は、各パスセグメントを結合するために使用します。

続いて**router.asPath.split("/")** で、現在のURLを「/」で分割して配列に変換しています。

あとは、map関数を使用して、各パスセグメントに対して処理を行っています。

if (path) で、パスが空でないかどうかを確認しています。

joinedPath += path + "/"; で、joinedPath に現在のパスセグメントを追加しています。

以上となります。

コピペでご自由にお使いください。