如何配置我的 Ionic 面包屑以仅在单击时更改 URL 的哈希值？

Question

我正在使用 Ionic 7 和 React 18。我已经构建了这些 Ionic 面包屑......

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

其目的是，如果有人单击其中一个面包屑，则只有 URL 的哈希部分发生变化。然而，上面的代码并没有实现这一点——它似乎将哈希解释为完整的 URL。

Answer 1

您可以使用 Ionic React 中的

ion-router-link

组件。

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;