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) }} /> ); }