Ionic面包屑配置：点击仅修改URL哈希值的方法

你遇到的问题是IonBreadcrumb的href="#sender"被识别成完整URL，而非仅修改哈希部分，这是因为Ionic的路由处理逻辑会把#开头的href当成独立路由，而非页面内锚点。下面给你两种可行的解决办法：

方法一：手动监听点击事件修改哈希 #

放弃直接用href，通过点击事件手动控制URL哈希，同时阻止默认跳转行为：

1. 若使用React Router，先导入useNavigate（也可直接操作window.location）：

import { useNavigate } from 'react-router-dom';

2. 在组件内定义点击处理函数：

const navigate = useNavigate();

const handleSenderBreadcrumbClick = (e) => {
  e.preventDefault();
  // 直接修改当前页面哈希
  window.location.hash = '#sender';
  // 若需配合React Router路由状态，也可使用：
  // navigate(window.location.pathname + '#sender', { replace: true });
};

3. 修改面包屑组件代码：

<IonBreadcrumbs>
  <IonBreadcrumb 
    onClick={handleSenderBreadcrumbClick}
    // 可选：仅当完成时添加可点击样式
    {...(isSenderCompleted() ? {} : {})}
  >Sender</IonBreadcrumb>
  ...
</IonBreadcrumbs>

方法二：拼接当前路径作为href #

如果想保留href属性，可以将当前页面路径和哈希拼接后传给href，确保Ionic识别为当前页面内的锚点：

<IonBreadcrumbs>
  <IonBreadcrumb 
    {...(isSenderCompleted() ? { href: `${window.location.pathname}#sender` } : {})}
  >Sender</IonBreadcrumb>
  ...
</IonBreadcrumbs>

这种方式会让href指向当前页面路径加哈希，点击时只会修改URL的哈希部分，不会跳转到其他页面。

内容的提问来源于stack exchange，提问作者Dave