提问人：Dave 提问时间：11/18/2023 更新时间：11/18/2023 访问量：10
如何将我的 Ionic 面包屑配置为仅在单击时更改 URL 的哈希值？
How do I configure my Ionic breadcrumbs to only change the hash of the URL when clicked?
问：
我正在使用 Ionic 7 和 React 18。我已经构建了这些离子面包屑......
<IonBreadcrumbs>
<IonBreadcrumb {...(isSenderCompleted() ? { href: '#sender' } : {})}>Sender</IonBreadcrumb>
...
</IonBreadcrumbs>
目的是，如果有人单击其中一个面包屑，则只有 URL 的哈希部分会更改。但是，上述方法并不能实现这一点 - 它似乎将哈希解释为完整的URL。
答：
0赞
Aman Khan
12/3/2023
#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;
评论
0赞
Dave
12/4/2023
谢谢，但这行不通。单击该链接使我返回“localhost：8100”。有趣的是，如果我对非哈希值进行硬编码，例如“/bogus-path”，它将重定向回“localhost：8100/bogus-path”，但我只对更改哈希而不是路径感兴趣。
0赞
Dave
12/7/2023
#2
事实证明，要正确地在 URL 中切换哈希值，我不应该使用“href”，而应该使用“routerLink”，例如
<IonBreadcrumb>
{isSenderCompleted() ? <IonRouterLink routerLink={`#sender`}>Sender</IonRouterLink> : <span>Sender</span>}
</IonBreadcrumb>
评论