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

Question

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

我认为我的代码与示例非常相似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>

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

Ionic tab bar changes URL but not rendered page

reactjs

ionic-framework

ionic-react