Ionic-framework: bug: external links don't open in react apps

[calendee]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
IonItems that have href properties are supposed to automatically route to that href. For "internal" links, this is behaving properly. However, "external" links do not open. Instead, they just pollute the URL with the external link

Expected behavior:
External links should open to the desired URL.

Steps to reproduce:

• Create a new React based project with ionic start sidemenu-react sidemenu --type=react
• Serve the project and open in browser
• Click the external links to documentation in the Home page
• Notice the URL updates to http://localhost:8100/https://ionicframework.com/docs/building/scaffolding

Related code:

Sample: https://stackblitz.com/edit/ionic-react-tabs

• On the "Home" page, click the links to the documentation.

<IonItem href="https://ionicframework.com/docs/" target="_blank">
  <IonIcon slot="start" color="medium" icon={book} />
  <IonLabel>Ionic Documentation</IonLabel>
</IonItem>

Other information:
None

Ionic info:

Ionic:

   Ionic CLI       : 5.2.5 (/Users/jn/.nvm/versions/node/v10.16.3/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 4.8.0-rc.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (/Users/jn/.nvm/versions/node/v10.16.3/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[jesobreira]

Have you tried onClick={() => window.open("http://url", "_system")}?

[calendee]

No, it's generally considered best practice to use href because Ionic will create an anchor tag that is accessible.

[calendee]

Here's an updated tabs sample using RC1. It shows that external links do not open even when using React Router Does Link tag.

https://codesandbox.io/s/ionic-react-tabs-external-links-fail-rc1-tocey

[Wind2esg]

Meet the same problem when learning ionic4 react at my first touching of front-end.

Actually, I tried some ways to solve this.
But it might be the best practical solution to fix it in creatComponent.

[Wind2esg]

It is said this would change in rc3

deprecationWarning('hrefchange', 'As of RC3, href links no longer go through the router, so transitions will not be applied to these links. To maintain transitions, use the new routerLink prop.');

[elylucas]

Yep, RC3 changed the href attribute to do a browser page redirect now, so you should be able to use it in conjunction with target to open pages in new tabs and such. The new routerLink attribute takes the place of what href did before.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.