Hi There,
I am new to the world of Ionic and I have just started a new project for the company where I work.
I am having a problem transitioning between my pages, a brief black screen appears when browsing.
The transition problem happens between the profile page and the information and application page
I drop you here the code of my App.tsx :
/* Import React and Ionic routing stack */
import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route } from "react-router";
/* Import Redux stack */
import { connect } from "react-redux";
import { sessionService } from "redux-react-session";
/* Import Ionic components*/
import {
IonApp,
IonIcon,
IonLabel,
IonRouterOutlet,
IonTabBar,
IonTabButton,
IonTabs,
} from "@ionic/react";
/* Import Ionic icons */
import { home, document, book } from "ionicons/icons";
/* Import Pages components */
import Login from "./pages/Login/Login";
import Home from "./pages/Home/Home";
import Documents from "./pages/Documents/Documents";
import Carnet from "./pages/Carnet/Carnet";
import Profile from "./pages/Profile/Profile";
import Informations from "./pages/Profile/Informations/Informations";
import Application from "./pages/Profile/Application/Application";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.scss";
const App: React.FC<{
checked: sessionService;
authenticated: sessionService;
}> = ({ checked, authenticated }) => {
return (
<>
{checked && (
<IonApp>
<IonReactRouter>
{!authenticated ? (
<>
<Redirect exact from="/" to="/login" />
<Route path="/login">
<Login />
</Route>
</>
) : (
<>
<IonTabs>
<IonRouterOutlet>
<Route
path="/"
component={Home}
exact={true}
/>
<Route
path="/documents"
component={Documents}
exact={true}
/>
<Route
path="/carnet"
component={Carnet}
exact={true}
/>
<Route
path="/profile"
component={Profile}
exact={true}
/>
<Route
path="/profile/informations"
component={Informations}
exact={true}
/>
<Route
path="/profile/application"
component={Application}
exact={true}
/>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="home" href="/">
<IonIcon
icon={home}
color="light"
/>
<IonLabel color="light">
Accueil
</IonLabel>
</IonTabButton>
<IonTabButton
tab="documents"
href="/documents"
>
<IonIcon
icon={document}
color="light"
/>
<IonLabel color="light">
Documents
</IonLabel>
</IonTabButton>
<IonTabButton
tab="carnet"
href="/carnet"
>
<IonIcon
icon={book}
color="light"
/>
<IonLabel color="light">
Carnet
</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</>
)}
</IonReactRouter>
</IonApp>
)}
</>
);
};
const mapStateToProps = ({ session }: any) => ({
checked: session.checked,
authenticated: session.authenticated,
});
export default connect(mapStateToProps)(App);
Here, the code of the profile page :
/* Import Redux stack */
import { connect } from "react-redux";
import { logoutUser } from "../../authentication/actions/userAction";
/* Import React routing stack */
import { useHistory } from "react-router-dom";
/* Import Components */
import Header from "../../components/Header/Header";
import ContainerButton from "../../components/Container.Button/Container.Button";
/* Import Ionic components */
import {
IonButton,
IonCol,
IonContent,
IonGrid,
IonIcon,
IonPage,
IonRow,
IonTitle,
} from "@ionic/react";
/* Import Ionic icons */
import { information, chevronForward, power } from "ionicons/icons";
/* Import Interface and Type values */
import { IUser, ILogoutUser } from "../../interfaces/interfaces";
/* Import SCSS */
import Style from "./Profile.module.scss";
const Profile: React.FC<{ userData: IUser; logoutUser: ILogoutUser }> = ({
userData,
logoutUser,
}) => {
const history = useHistory();
return (
<IonPage className={Style.page__container}>
<Header userData={userData} headerTitle="Mon Profil" />
<IonContent fullscreen>
<IonGrid className={Style.page__container__grid}>
<IonRow>
<IonCol>
<ContainerButton
iconTitle={chevronForward}
buttonTitle="Mes informations"
href="/profile/informations"
/>
</IonCol>
<IonCol>
<ContainerButton
iconTitle={information}
buttonTitle="Informations sur l'application"
href="/profile/application"
/>
</IonCol>
<IonCol>
<IonButton
onClick={(event) => {
event.preventDefault();
logoutUser(history);
}}
color="light"
className={Style.page__containter__button}
expand="block"
>
<IonTitle
slot="start"
className={
Style.page__container__button__title
}
>
Deconnexion
</IonTitle>
<IonIcon
slot="end"
color="primary"
icon={power}
/>
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
const mapStateToProps = ({ session }: any) => ({
userData: session.user[0],
});
export default connect(mapStateToProps, { logoutUser })(Profile);
Do you have an idea of what’s wrong with my architecture or routing?
Thank you in advance.
David