bug: IonTabButton1 href doesn't go to respective tab

[TylerBurnett]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x React

Current behavior:

Any page that inherits <RouteComponentProps> from either React router OR React Router DOM will automatically overwrite the href URL of IonTabButton1, upon navigation to such page.

Expected behavior:

For that not to happen.

Steps to reproduce:

After installing the respective packages, take note of the current routing that is set in the App.tsx. Now once you start the app you should notice that you are on the intial tester page which in face inherits <RouteComponentProps>. Now attempt to navigate to IonTabButton1.
Reproduction.zip

Related code:

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.0 (C:\Users\tyler\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.3.1

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : 0.14.1
   native-run  : not installed

System:

   NodeJS : v14.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.7
   OS     : Windows 10

[TylerBurnett]

Rolling back to @ionic/react@5.1.0 and @ionic/react-router@5.1.0 fixed the issue for the time being.

[liamdebeasi]

Thanks for the issue. This appears to be regression in Ionic React v5.3.0. cc @elylucas

[tx-tim]

experiencing something very similar

[jlkiri]

Experiencing the similar issue.
Rolling back to @ionic/react@5.1.0 and @ionic/react-router@5.1.0 helps.

[tx-tim]

any update on this? Version 5.1 has issues withgoBack from NavContext. However, I can use history.goBack from react-router-dom to navigate back. The problem with this is I don't have control over the animations

[djfooks]

If I roll back to @ionic/react@5.1.0 and @ionic/react-router@5.1.0 I get crashes in random bits of react-dom... which versions do I need for all the other packages?
I have this (generated from the template)

 "dependencies": {
    "@capacitor/core": "2.4.3",
    "@ionic/react": "5.1.0",
    "@ionic/react-router": "5.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "ionicons": "^5.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "typescript": "3.8.3"
  },

[tx-tim]

@liamdebeasi does your fix for #22519 also fix this issue, or are they completely separate?

[liamdebeasi]

@liamdebeasi does your fix for #22519 also fix this issue, or are they completely separate?

That is a separate fix that only affects Ionic Vue.