Hi there!
I’ve set up a tabs navigation here and it’s almost working fine. The issue happens when I try to click on a IonItem to navigate to an internal page, change I’m supposed to change my password.
Main.router.tsx
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { listOutline, settingsOutline } from "ionicons/icons";
import React from "react";
import { Redirect, Route, RouteComponentProps } from "react-router";
import { FeedScreen } from "./Feed/Feed.screen";
import { ChangePasswordScreen } from "./Settings/ChangePassword.screen";
import { SettingsScreen } from "./Settings/Settings.screen";
export const MainPageRouter: React.FC<RouteComponentProps> = ({ match }) => {
return (
<IonReactRouter>
<IonTabs>
<IonRouterOutlet id="main">
<Route
path="/main/settings/change-password"
component={ChangePasswordScreen}
exact
/>
<Route
path={`${match.url}/feed`}
component={FeedScreen}
exact={true}
/>
<Route
path={`${match.url}/settings`}
component={SettingsScreen}
exact={true}
/>
<Redirect from="/main" to="/main/feed" exact />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="feed" href={`${match.url}/feed`}>
<IonIcon icon={listOutline} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="settings" href={`${match.url}/settings`}>
<IonIcon icon={settingsOutline} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
);
};
Settings.screen.tsx
import { IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from "@ionic/react";
import React from "react";
import { useDispatch } from "react-redux";
import { RoutingHelper } from "../../../libs/RoutingHelper";
import { userClear } from "../../../store/actions/user.action";
export const SettingsScreen: React.FC = () => {
const dispatch = useDispatch();
const onUserLogout = () => {
dispatch(userClear());
RoutingHelper.redirect("/auth");
};
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonList>
<IonItem
routerLink="/main/settings/change-password"
routerDirection="root"
detail
>
<IonLabel>Change Password</IonLabel>
</IonItem>
<IonItem detail onClick={onUserLogout}>
<IonLabel>Logout</IonLabel>
</IonItem>
</IonList>
</>
);
};
ChangePassword.screen.tsx
<InternalPage title={TS.translate("auth", "changePassword")}>
<Text>{TS.translate("auth", "changePasswordInfoText")}</Text>
<FloatingInput
label={TS.translate("form", "currentPassword")}
type="password"
value={passwords.currentPassword}
onChange={(e) =>
setPasswords({ ...passwords, currentPassword: e.target.value })
}
/>
<br />
<FloatingInput
label={TS.translate("form", "newPassword")}
type="password"
value={passwords.newPassword}
onChange={(e) =>
setPasswords({ ...passwords, newPassword: e.target.value })
}
/>
<br />
<IonButton expand="block" color="tertiary" onClick={onSubmit}>
{TS.translate("form", "submit")}
</IonButton>
</InternalPage>
PS: InternalPage is a custom IonPage.
Another issue is that these tabs don’t disappear when I’m entering an internal screen
Could someone give me a hand?