带有根URL的IonTabButton

问题描述

当前行为：

当给IonTabButton的href道具使用“ /”作为href道具时，有两件事会中断。

1. 无论选择哪个选项卡，上述IonTabButton都将突出显示。
2. 从另一个选项卡切换到上述IonTabButton会产生意外的页面过渡动画。

预期行为：

应突出显示所单击的IonTabButton，并且不应出现页面动画

复制步骤：

1. 安装基本的Ionic React选项卡应用程序ionic start photo-gallery tabs --type=react --capacitor
2. 用提供的代码替换<App/>组件

相关代码：

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/" component={Tab1} exact={true} />
          <Route path="/tab2" component={Tab2} exact={true} />
          <Route path="/tab3" component={Tab3} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon icon={images} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3" rel="help">
            <IonIcon icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）