この記事は React Advent Calendar 2019 の 9日目の記事です。 パンくずリストを ContextAPI で実装したら、使い方の勉強になったので実装方法をまとめました。 Next.js でデモを実装しているので、他の環境で利用する場合は少し置き換えが必要ですが、基本部分は変更せずに再利用可能です。 t-yng/react-breadcrumb-example デモ 目次 パンくずリストコンポーネントの作成 Contextの作成 Providerの作成 Hooks関数の作成 使い方 パンくずリストコンポーネントの作成 コンポーネントの描画イメージです reduce() で渡されたパンくずリストの要素の一覧を セパレーター(>) で結合をしています。 Linkコンポーネントは Next.js 依存なので、ここだけ自分の環境で適宜置き換えてください。 import Rea