How do I configure my Ionic breadcrumbs to only change the hash of the URL when clicked?

Question

I'm using Ionic 7 and React 18. I have constructed these Ionic breadcrumbs ...

    <IonBreadcrumbs>
      <IonBreadcrumb {...(isSenderCompleted() ? { href: '#sender' } : {})}>Sender</IonBreadcrumb>
    ...
    </IonBreadcrumbs>

with the intention being that if someone clicks one of the breadcrumbs, only the hash portion of the URL changes. However, the above doesn't accomplish this -- it seems to interpret the hash as a full URL.

Answer 1

Turns out to properly have the hash switched out in the URL, I shouldn't have used "href", but rather "routerLink", e.g.

      <IonBreadcrumb>
        {isSenderCompleted() ? <IonRouterLink routerLink={`#sender`}>Sender</IonRouterLink> : <span>Sender</span>}
      </IonBreadcrumb>

Answer 2

You can use the ion-router-link component from Ionic React.

import { IonBreadcrumbs, IonBreadcrumb } from '@ionic/react';
import { IonRouterLink } from '@ionic/react-router';

const App = () => {
  const isSenderCompleted = () => {
    return true; // Replace with your logic
  };

  return (
    <IonBreadcrumbs>
      <IonBreadcrumb>
        {isSenderCompleted() ? (
          <IonRouterLink href="#sender">Sender</IonRouterLink>
        ) : (
          <span>Sender</span>
        )}
      </IonBreadcrumb>
    </IonBreadcrumbs>
  );
};

export default App;