How to make breadcrumb item client-side navigation as next/link instead of browser routing

[hiimnhan]

I am using this library for my NextJS project. I am touching Breadcrumb component but seems like it is browser routing which mean it refresh full page. What can I do to make it route as next/link?

[connorlanigan]

The Breadcrumb component provides an onFollow event that you can use to perform the client-side navigation.
NextJS provides the useRouter hook, which has a push method for this use case.

You can combine them like this:

import BreadcrumbGroup from "@cloudscape-design/components/breadcrumb-group";
import { useRouter } from 'next/router';

function MyApp() {
  const router = useRouter();

  return (
    <BreadcrumbGroup
      items={[
        { text: 'System', href: '#' },
        { text: 'Components', href: '#components' },
        {
          text: 'Breadcrumb group',
          href: '#components/breadcrumb-group',
        },
      ]}
      ariaLabel="Breadcrumbs"
      onFollow={event => {
        event.preventDefault();
        router.push(event.detail.href)
      }}
    />
  );
}