Repository: ionic-team/ionic-framework
File: core/src/components/tabs/tabs.tsx (TypeScript)

Code before:
       * stack or URL updates associated with the router.
       */
      this.useRouter =
        (!!this.el.querySelector('ion-router-outlet') || !!document.querySelector('ion-router')) &&
        !this.el.closest('[no-router]');
    }
    if (!this.useRouter) {
      const tabs = this.tabs;
      if (tabs.length > 0) {
        await this.select(tabs[0]);
      }
    }
    this.ionNavWillLoad.emit();
  }

  componentWillRender() {
    const tabBar = this.el.querySelector('ion-tab-bar');
    if (tabBar) {
      let tab = this.selectedTab ? this.selectedTab.tab : undefined;

      // Fallback: if no selectedTab is set but we're using router mode,
      // determine the active tab from the current URL. This works around
      // timing issues in React Router integration where setRouteId may not
      // be called in time for the initial render.
      if (!tab && this.useRouter && typeof window !== 'undefined') {
        const currentPath = window.location.pathname;
        const tabButtons = this.el.querySelectorAll('ion-tab-button');

        // Look for a tab button that matches the current path pattern
        for (const tabButton of tabButtons) {
          const tabId = tabButton.getAttribute('tab');
          if (tabId && currentPath.includes(tabId)) {
            tab = tabId;
            break;
          }
        }
      }

      tabBar.selectedTab = tab;
    }
  }

  /**
   * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
   *
   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
   */
  @Method()
  async select(tab: string | HTMLIonTabElement): Promise<boolean> {
    const selectedTab = getTab(this.tabs, tab);
    if (!this.shouldSwitch(selectedTab)) {

Review comment (refactor):
Can we create a ticket to investigate removing this for React Router 6 and add a TODO comment above this to remove it like:

```
// TODO(FW-1234): Remove this with React Router upgrade
```

Code after:
       * stack or URL updates associated with the router.
       */
      this.useRouter =
        (!!this.el.querySelector('ion-router-outlet') || !!document.querySelector('ion-router')) &&
        !this.el.closest('[no-router]');
    }
    if (!this.useRouter) {
      const tabs = this.tabs;
      if (tabs.length > 0) {
        await this.select(tabs[0]);
      }
    }
    this.ionNavWillLoad.emit();
  }

  componentWillRender() {
    const tabBar = this.el.querySelector('ion-tab-bar');
    if (tabBar) {
      let tab = this.selectedTab ? this.selectedTab.tab : undefined;

      // Fallback: if no selectedTab is set but we're using router mode,
      // determine the active tab from the current URL. This works around
      // timing issues in React Router integration where setRouteId may not
      // be called in time for the initial render.
      // TODO(FW-6724): Remove this with React Router upgrade
      if (!tab && this.useRouter && typeof window !== 'undefined') {
        const currentPath = window.location.pathname;
        const tabButtons = this.el.querySelectorAll('ion-tab-button');

        // Look for a tab button that matches the current path pattern
        for (const tabButton of tabButtons) {
          const tabId = tabButton.getAttribute('tab');
          if (tabId && currentPath.includes(tabId)) {
            tab = tabId;
            break;
          }
        }
      }

      tabBar.selectedTab = tab;
    }
  }

  /**
   * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
   *
   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
   */
  @Method()
  async select(tab: string | HTMLIonTabElement): Promise<boolean> {
    const selectedTab = getTab(this.tabs, tab);