ReactにおけるBreadcrumb（パンくず）実装のパターン - タオルケット体操

もちろんケースバイケースなんだけど、パンくずリストというのは全体のレイアウトに属していながらマウントされる要素に従属して中身が変わるという点でちょっと厄介。 具体的にどういうケースで厄介かというと、ヘッダやサイドバーなどをまとめたpage layout的なコンポーネントを大枠に作り、内部の表示をreact-routerで切り替えている場合。業務アプリとかでやりがちなんじゃないかなとおもう。 ざっくりお気持ち擬似コード。 const PageLayout = (breadcrumbs: readonly Breadcrumb[]) => { <Layout> <Header breadcrumbs={breadcrumbs} /> <Sider /> <Main> {children} </Main> <Footer /> </Layout> }; const Routes = () =>