Thanks for the request. Could you post a reproduction of the issues you're running into?

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

Here you go, using the simple "list" default app: https://github.com/maelp/ionic-href-issue

• if you use "router-link" (by default) and click on a message, you can use "swipe-to-go-back"
• if you use "href" (using the toggle) and click on a message, it reinits the router

Thank you, and apologies for the delay. I've confirmed that this behavior exists in all three frameworks (Angular/React/Vue) when using ion-item. I'm going to go ahead and file this as a bug.

While shift+click is a desktop behavior and we're trying to move our focus to mobile apps exclusively, we've addressed this with regular anchor links in Angular before: #25014 The href behavior is also worth taking a closer look at.

There are three possible things that may need doing here:

1. Address not being able to open the link in a new tab when using the routerLink property on ion-item.
2. Address the browser performing a hard refresh when using the href property on ion-item.
3. Update the ion-item docs in accordance with whatever we decide to do; right now it only describes the href prop (though routerLink is referenced in framework-specific routing pages) and the hard refresh behavior is not mentioned.

Thanks, any news on this? :)

I am also encountering this but, and using routerLink is not an ideal solution as it currently stands for two reasons:

1. It does not show the detail arrow when using routerLink.
2. If there are buttons nested within the IonItem, clicking one will also be considered a click on the IonItem and thus perform the navigation (in addition to clicking the button). This is not true of the href version.

Is there anything I can do to help move this along? Have you decided the desired functionality? It seems the RouterLink should be rendered with the href prop instead of an a tag

Is there any news on this item? :)

This seems to be an accessibility issue as well.

With IonItem and the href attribute specified I can tab to the item and navigate with my keyboard. Middle-click, right-click, or shift-click also work fine on the web. IonItem is correctly detected as a link by the browser. However, there's a full page reload after navigation and everything flashes black for a second.

It's not great to need to remember specify both router-link and href with the exact same values every time you want to make a link, but it's workable.

With IonRouterLInk I can't use keyboard navigation at all. IonRouterLinks are not in the tab order, there's no middle, right, or shift-click, and the item isn't detected as a link by the browser at all.