Featured image of post React BootstrapのBreadcrumbでnext/linkを使う

React BootstrapのBreadcrumbでnext/linkを使う

Twitter ツイート Hatena Bookmark ブックマーク

React BootstrapのBreadcrumbでnext/linkを使う方法についての見聞録です。

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 を使えば大丈夫。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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

おまけ

1
2
3
<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
Built with Hugo
テーマ StackJimmy によって設計されています。