React nested routing got errors on page transition sidemenu

Ionic Framework
1

The issue is when developing pages, with nested routes, the page transition got black

When I wrap the IonRouterOutlet with IonPage the transition works fine but when navigating to other page it got blank page. But after removing the IonPage the pages works find but when the page is refreshed it got messed up again

Here is the example code.

<>
      <IonMenu contentId="dashboard-content" ref={menuRef}>
        <IonHeader>
          <IonToolbar>
            <IonTitle>
              <div className="ion-flex ion-align-items-center">
                <IonAvatar style={{width: 40, height: 40}}>
                  <img src="./imgs/app-logo.jpeg"/>
                </IonAvatar>
                <IonText className="ion-padding-start">Juan Dela Cruz</IonText>
              </div>
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonList >
            <IonItem lines="full" button onClick={() => hadnleNavigate('home')}>
              <IonIcon icon={homeOutline} slot="start" ></IonIcon>
              <IonLabel>Home</IonLabel>
            </IonItem>
            <IonItem lines="full" button onClick={() => hadnleNavigate('about')}>
              <IonIcon icon={helpCircleOutline} slot="start" ></IonIcon>
              <IonLabel>About</IonLabel>
            </IonItem>
            <IonItem lines="full" button onClick={handleLogout}>
              <IonIcon icon={logOutOutline} slot="start" ></IonIcon>
              <IonLabel>Logout</IonLabel>
            </IonItem>
          </IonList>
        </IonContent>
      </IonMenu>
      <IonRouterOutlet id="dashboard-content">
        <Route exac path={PATH + "/home"}>
          <Home />
        </Route>
        <Route exac path={PATH + "/about"}>
          <About />
        </Route>
        <Route exac path={PATH + "/404"}>
          <PageNotFound />
        </Route>
        <Route exact path={PATH}>
          <Redirect to={PATH + "/home"}/>
        </Route>
        <Route render={() => <Redirect to={PATH + '/404'}/>}/>
      </IonRouterOutlet>
    </>

Black page

  • Ionic version 7
  • React
2

Or can someone provide a better example on how to implement nested routing with sidebar menu on React ? :smiling_face:

3

This is bad, no response

4

what do you mean by nested routes? And it is a lot easier to provide assistance when you provide a project that demonstrates the issue.

5

Seems like no one encountered this kind of issue, Also ionics documentation lack of examples regarding on nested route, they only provide the documentation of React route dom which that not matter, cause it will work as usual, but implementation on the Ionic framework will cause different behavior.

Got other project which uses Vue instead of react, but seems like there are no problem on it.

6

Got an update on the said error,

Wrapping it with IonRouterOutlet partially solve the problem

7

Got an alternative solution,

I have to render the routing with IonPage and no IonPage in order to work,

<>
      <Menu />
      {
        (() => {
          if (!show) {
            return (
              <IonPage>
                <Router />
              </IonPage>
            )
          }
          return (
            <>
              <Router />
            </>
          )
        })()
      }
    </>
8

This docs doest feel working

9

So got find a solution,
Here is what happened.
Reading on this documentation to have a better understanding on how nested should works

Then after that this documentation

In order to make nested route to work:

The design should be:
file from App.tsx

<IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route exact path="/">
            <Redirect to="/login" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>

Notice that the dashboard path has not have exact attribute?
When nesting exact should be omitted (in my own theory)

Now on the nested route under dashboard this should be the format
This is from dashboard.jsx file

<IonRouterOutlet id="dashboard-content">
        <Route path={"/dashboard/about"} render={() => <About />} />
        <Route path={"/dashboard/transactions"} render={() => <Transactions />} />
        <Route path={"/dashboard/404"} render={() => <PageNotFound />} />
        <Route path={'/dashboard/home'} render={() => <Home />} />
        <Route path={'/dashboard/accounts'} render={() => <Accounts />} />
        <Route exact path="/dashboard" render={() => <Redirect to={PATH + '/accounts'}/>} />
      </IonRouterOutlet>

Under this code of line the /dashboard path is set to exact and other path is doest have exact attribute