Ionic选项卡栏更改URL，但不显示页面

Question

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

我认为我的代码与示例Ionic React会议应用程序非常相似，所以我很困惑这里发生了什么。

它在@ionic/rect和@ionic/Rect路由器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>