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 タグとなる
ということで以下のように linkAs に next/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 .
