パンくず

1import React from 'react';
2import Breadcrumbs from '../components/breadcrumbs';
3
4const BreadcrumbsDemo = () => {
5  return (
6    <Breadcrumbs
7      pages={[
8        {
9          name: 'パンくず',
10        },
11      ]}
12    />
13  );
14};
15
16export default BreadcrumbsDemo;

解説

パンクずはレイアウトなどに含めて一元管理する方法もありますがページのURLと名前を紐付ける処理が複雑化するケースもあるため、画面単位でパンくず及びそのリストを定義する方が直感的なメンテナンスになります。

レイアウトの構造上一元管理する方が望ましい場合、リストを各画面の getStaticProps で生成し、画面ごとのレイアウトでそれを使うようにしましょう。

使用ライブラリ

なし

参考サイト

なし