polidog lab

Top About Rss
2022年03月12日

React BootstrapのBreadcrumbでnext/linkを使う

React BootstrapのBreadcrumb.Itemでhref を指定すると、普通のリンクになってしまう。

import { Breadcrumb } from 'react-bootstrap'
import React from 'react'

type BreadcrumbItem = {
  title: string
  link?: string
}

interface Props {
  breadcrumbList: BreadcrumbItem[]
}

interface DetailProps {
  item: BreadcrumbItem
}

const Detail: React.FC<DetailProps> = ({ item }) =>
  item.link ? (
    <Breadcrumb.Item href={item.link}>
      {item.title}
    </Breadcrumb.Item>
  ) : (
    <Breadcrumb.Item active>{item.title}</Breadcrumb.Item>
  )

const Breadcrumbs = ({ breadcrumbList }: Props) => (
  <Breadcrumb className="my-sm-3 my-md-4">
    {breadcrumbList.map(item => (
      <Detail item={item} key={item.title} />
    ))}
  </Breadcrumb>
)

export default Breadcrumbs

これだと、パンくずをクリックされたときに、SPAの意味ないじゃんってことになる。 実は Breadcrumb.Item コンポーネントには linkAs というオプションがある。 React-Bootstrap · React-Bootstrap Documentation

linkAsの説明は以下のように書かれている

You can use a custom element type for this component’s inner link.

つまり内部使えるタグを変更することができる。 おそらくデフォルトは a タグとなる

ということで以下のように linkAsnext/link を使えば大丈夫。

import { Breadcrumb } from 'react-bootstrap'
import React from 'react'
import Link from 'next/link'

type BreadcrumbItem = {
  title: string
  link?: string
}

interface Props {
  breadcrumbList: BreadcrumbItem[]
}

interface DetailProps {
  item: BreadcrumbItem
}

const Detail: React.FC<DetailProps> = ({ item }) =>
  item.link ? (
    <Breadcrumb.Item linkAs={Link} href={item.link}>
      {item.title}
    </Breadcrumb.Item>
  ) : (
    <Breadcrumb.Item active>{item.title}</Breadcrumb.Item>
  )

const Breadcrumbs = ({ breadcrumbList }: Props) => (
  <Breadcrumb className="my-sm-3 my-md-4">
    {breadcrumbList.map(item => (
      <Detail item={item} key={item.title} />
    ))}
  </Breadcrumb>
)

export default Breadcrumbs

参考

react-bootstrap breadcrumb with react-router-dom

おまけ

<Breadcrumb.Item href={item.link}>
  <Link href={item.link}>{item.title}</Link>
</Breadcrumb.Item>

こうやってごまかそうとすると以下のようなエラーがでます

Warning: validateDOMNesting(…): cannot appear as a descendant of .

comments powered by Disqus