У меня есть панель вкладок в Ioni c Реакция, которая должна отображаться на некоторых страницах, а не на других. Я недавно обновился до Ioni c React 5.0.7, и с тех пор мои вкладки перестали работать. В частности, хотя нажатие на вкладки приводит к изменению URL-адресов, оно не может надежно изменить отображаемую страницу, а вместо этого показывает ту же страницу. (По какой-то странной причине нажатие кнопки «Найти из профиля» работает, но не наоборот.) Тем не менее, консольные сообщения со страницы, по которой я перехожу, отображаются, даже если ни один из визуальных компонентов не работает. И если я обновлю sh страницу, отобразится правильная страница.
Я думаю, что мой код очень похож на пример Ioni c React Conference App , поэтому я запутался что здесь происходит.
Он работает правильно в @ ionic / реагировать и @ ionic / реагировать-маршрутизатор версии 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>
)
}