离子标签栏更改 URL 但未呈现页面

Question

我在 Ionic React 中有一个标签栏，它应该显示在某些页面上而不是其他页面上。我最近升级到 Ionic React 5.0.7，从那以后我的标签就停止工作了。具体来说，尽管单击选项卡会更改 URL，但它并不能可靠地更改呈现的页面，而是显示相同的页面。 （出于某种奇怪的原因，从 Profile 中单击 Discover 有效，但反之亦然。）尽管如此，我导航到的页面中的控制台消息仍然出现，即使没有任何可视组件出现。如果我刷新页面，就会呈现正确的页面。

我认为我的代码与示例 Ionic React Conference App 非常相似，所以我很困惑这里发生了什么。

它在 @ionic/react 和 @ionic/react-router 版本 0.0.10 中正常工作，但在 4.11.10、5.0.5 或 5.0.7 中不能正常工作。

TabBar.tsx：

const TabBar: React.FC<TabBarProps> = () =>
    <IonTabs>
        <IonRouterOutlet>
            <Route path="/:tab(discover)" component={Discover} exact />
            <Route path="/:tab(profile)" component={Profile} exact />
            <Route path="/Page3" component={Page3} />
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
            <IonTabButton tab="discover" href="/discover">
                <IonIcon icon={search} />
                <IonLabel>Discover</IonLabel>
            </IonTabButton>
            <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={person} />
                <IonLabel>Profile</IonLabel>
            </IonTabButton>
        </IonTabBar>
    </IonTabs>;

export default TabBar;

App.tsx：

const App: React.FC = () => {
    return (
        <IonApp>
                <IonReactRouter>
                    <IonRouterOutlet>
                        <Route exact path="/login" component={Login} />
                        <Route exact path="/register" component={Register} />
                        <Route path="/" component={TabBar} />
                    </IonRouterOutlet>
                </IonReactRouter>
        </IonApp>
    )
}

Answer 1

认为您缺少TabBar 组件的默认路径

<IonRouterOutlet>
   <Route path="/:tab(discover)" component={Discover} exact />
   <Route path="/:tab(profile)" component={Profile} exact />
   <Route path="/Page3" component={Page3} />
   <Route exact path="/" render={() => <Redirect to="/discover" />} />
</IonRouterOutlet>