Breadcrumb Hydration Error

[piyusharmap]

As per the documentation, using Link inside BreadcrumbLink throws a hydration error. This happens because both BreadcrumbLink and Link are rendered as tags, which results in nesting two tags. To avoid this issue, you should omit the use of Link when using BreadcrumbLink.

To solve this I simply used the href attribute inside the BreadcrumbLink.

[luan-coelho]

It is necessary to update the examples in the Breadcrumb documentation.

https://ui.shadcn.com/docs/components/breadcrumb#link-component

[luan-coelho]

Another way that also works is to omit the BreadcrumbLink component.

<Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <Link href="/">Home</Link>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>```