<p>React.js で簡単なパンくずリストを作ってみます。<br>Googleで検索しても良い感じのコンポーネントが見つからなかったため、<br>練習も兼ねて自作致しました。<br></p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/reactjs-tailwindcss-breadcrumb.png" alt=""></p><h2 id="h9bbb0bca62"><br>開発環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>React.js 17.0.1
Next.js 10.0.5
Tailwind CSS 2.0.2</code></pre><p><br></p><h2 id="h72cb700925">実装を行う</h2><h3 id="hf40fa70619">アイコンモジュールをインストール（省略可能）</h3><p>矢印には <a href="https://react-icons.github.io/react-icons/" target="_blank" rel="noopener noreferrer">React icons</a> のアイコンを使用していますので、<br>モジュールをインストールします。</p><pre><code>yarn add react-icons</code></pre><p><br></p><h3 id="hf623e49089">コンポーネントを作る</h3><p>Next.js を使用しているため、<code>components/</code>に<code>breadcrumbs.js</code>という名前で配置しました。</p><pre><code>import { FaChevronRight } from "react-icons/fa";

export default function BreadCrumbs({ lists }) {
  if(!lists){ 
    return('')
  }
  
  return (
    &lt;ol className="flex font-bold overflow-x-auto whitespace-nowrap" aria-label="breadcrumb"&gt;
      {lists.map(({ string, path }, index) =&gt; (
          &lt;li className="flex items-center" key={index}&gt;
            {lists.length - 1 !== index 
              ?
              &lt;&gt;
                &lt;a className="text-gray-900 text-sm md:text-base underline" href={path}&gt;{string}&lt;/a&gt;
                &lt;FaChevronRight aria-hidden="true" className="text-xs mx-2"/&gt;
              &lt;/&gt;
              : &lt;span className="text-sm md:text-base" aria-current="page"&gt;{string}&lt;/span&gt;
            }
          &lt;/li&gt;
      ))}
    &lt;/ol&gt;
  );
}</code></pre><p><br></p><h3 id="h1f1e6b8bf5">コンポーネントを呼び出す</h3><p><code>props</code>の<code>lists</code>に連想配列を指定します。<br><code>string</code>にはテキスト、<code>path</code>にはパスを指定します。</p><pre><code>import BreadCrumbs from "../components/breadcrumbs";

&lt;BreadCrumbs 
  lists={[
    {
      string: "トップページ",
      path: "/",
    },
    {
      string: post.title,
    }
  ]}
/&gt;</code></pre><p><br>以上で実装は完了です。<br>ページが大量にある場合は React Router などのルーターと連携するコンポーネントを使用された方が<br>良いかと思われますが、小規模のアプリであればこれでも十分かと思われます。<br>よろしければご活用ください。</p>

カテゴリーが「TailwindCSS」の記事

カテゴリ