React + Ionic 5 and routing

Hey guys,

I’m working on an app that contains a set of routes:

One is the “home” page, a page with 2 buttons that navigate the user to /login or /register. The other is the “dashboard” (user) page, essentially the “protected” area for logged-in users.

As part of the non-protected routes, after the registration, there are 2 more steps to “customize” the user experience – (/customize and /suggested-programs).

The issue is simple - the routing suddenly started to behave super weirdly.
First-time user register, the journey work completely fine. But if the user logs out and tries to register again, the routes starting to mess up, usually the /register works, but then /customize doesn’t. Sometimes I see a blank page; sometimes, I see the register page.

I tried everything, I spent an entire day today, but I am really out of ideas.

Code snippets for context:

App. tsx

<IonApp dir="rtl">
      <IonPage className="app-bg-black font-rubik">
        <IonReactRouter>
          <IonRouterOutlet animated={false}>
            <Route
              path="/user"
              render={(props) =>
                currentUser ? <UserRoute {...props} /> : <Redirect to="/" />
              }
            />
            <Route
              path="/suggested-programs"
              render={(props) =>
                currentUser ? (
                  <UserSuggestedPrograms {...props} />
                ) : (
                  <Redirect to="/" />
                )
              }
              exact
            />

            <Route
              path="/customize"
              render={(props) =>
                currentUser ? (
                  <CustomizeUserExperience {...props} />
                ) : (
                  <Redirect to="/" />
                )
              }
              exact
            />

            <Route path="/register" component={Register} exact />
            <Route path="/login" component={LoginRoute} exact />
            <Route path="/" exact={true}>
              {currentUser ? <Redirect to="/user" /> : <MainRoute />}
            </Route>
          </IonRouterOutlet>
        </IonReactRouter>
      </IonPage>
    </IonApp>

UserRoute.tsx

export const UserRoute: FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route path="/user/:tab(program)" component={UserProgram} exact />
        <Route path="/user/:tab(profile)" component={UserProfile} exact />

        <Route
          exact
          path={match.url}
          render={() => <Redirect to="/user/program" />}
        />
      </IonRouterOutlet>

      <IonTabBar slot="bottom" color="primary">
        <IonTabButton tab="profile" href="/user/profile">
          <IonIcon icon={personOutline} />
          <IonLabel>הפרופיל שלי</IonLabel>
        </IonTabButton>

        <IonTabButton tab="program" href="/user/program">
          <IonIcon icon={barbellOutline} />
          <IonLabel>תוכנית אישית</IonLabel>
        </IonTabButton>

        <IonTabButton tab="tab2" href="/user/statistics">
          <IonIcon icon={pulseOutline} />
          <IonLabel>מעקב משקלים</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

Any help/ideas are much appreciated. Thanks!

4 posts - 2 participants

Read full topic