環境

React 17.0.2
React Router 6.0.1
use-react-router-breadcrumbs 3.0.1

実装

ルーティング

今回は、 /router-breadcrumbs/1st/2nd/3rd のようなネストしたルーティングでパンくずリストを表示してみます。

そのため、ルーティングはこんな感じにします。

<Routes>
  <Route path="router-breadcrumbs">
    <Route path="1st">
      <Route path="" element={<FirstLayer />} />
      <Route path="2nd">
        <Route path="" element={<SecondLayer />} />
        <Route path="3rd">
          <Route path="" element={<ThirdLayer />} />
        </Route>
      </Route>
    </Route>
  </Route>
</Routes>

パンくずリストのコンポーネントを作成

use-react-router-breadcrumbs のREADMEに従い、パンくずリストのコンポーネントを作成します。

import useBreadcrumbs from 'use-react-router-breadcrumbs'
import {NavLink} from 'react-router-dom'

const Component = (): JSX.Element => {
  const breadcrumbs = useBreadcrumbs()
  return (
    <>
      {breadcrumbs.map(({match, breadcrumb}, index) => (
        <span key={match.pathname}>
          {index > 0 && <> / </>}
          <NavLink to={match.pathname}> {breadcrumb}</NavLink>
        </span>
      ))}
    </>
  )
}
export default Component

各ページのコンポーネントを作成

パンくずリストのコンポーネントを組み込んだページコンポーネントを用意します。

FirstLayer.tsx

import {Link} from 'react-router-dom'
import MyBread from '@/components/pages/router_breadcrumbs/MyBread'

const Component = (): JSX.Element => {
  return (
    <>
      <MyBread />
      <h1>First Layer</h1>
      <Link to="/router-breadcrumbs/1st/2nd">To 2nd Layer</Link>
    </>
  )
}
export default Component

　
SecondLayer.tsx

import {Link} from 'react-router-dom'
import MyBread from '@/components/pages/router_breadcrumbs/MyBread'

const Component = (): JSX.Element => {
  return (
    <>
      <MyBread />
      <h1>Second Layer</h1>
      <Link to="/router-breadcrumbs/1st/2nd/3rd">To 3rd Layer</Link>
    </>
  )
}
export default Component

ThridLayer.tsx

import MyBread from '@/components/pages/router_breadcrumbs/MyBread'

const Component = (): JSX.Element => {
  return (
    <>
      <MyBread />
      <h1>Third Layer</h1>
    </>
  )
}
export default Component