Skip to content

bug: ion-tab is not initially selected with react router (starting in Ionic v8.6) #30595

@aeharding

Description

@aeharding

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

I recently attempted upgrading from Ionic v8.5 to latest.

I noticed an issue starting in Ionic v8.6. When using with react-router, the initial rendered tab is not selected.

This issue can be easily reproduced by checking the Ionic docs codepend for ion-tabs with React Router (observe the "Listen Now" button color):

Version Demo Link Screenshot
v8.6 StackBlitz Demo Image
v8.5 StackBlitz Demo Image

Expected Behavior

The initial route should automatically activate the appropriate ion-tab.

Steps to Reproduce

  1. Open above codepens
  2. Observe "Listen Now" button

Code Reproduction URL

https://stackblitz.com/edit/lcx3ywfg

Ionic Info

N/A

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions