Render issues with React (Routing?)

Ionic Framework Ionic React
1

I am using the latest version of Ionic (@ionic/react": "7.0.14, “@ionic/react-router”: “7.0.14”) and am encountering some strange issue when pressing an <IonBackButton> to navigate back in a page.

Attached is a gif showing the behavior

qemu-system-x86_64_vJIGbcmYlC

You can see that when I press the back button it causes the page contents to be duplicated for a brief moment before it transitions away.

Both content in <IonContent> and <IonHeader> seem to duplicate.

My App / Router code looks like this:

const App: React.FC<RouteComponentProps> = (props) => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route exact path="/home" component={HomePage} />
            <Redirect exact from="/" to="/home" />
            <Route path="/messages" component={MessagesTab} />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="home" href="/home">
              <IonIcon aria-hidden="true" icon={icons.home} className="selected" />
              <IonIcon aria-hidden="true" icon={icons.homeOutline} className="unselected" />
            </IonTabButton>
            <IonTabButton tab="messages" href="/messages">
              <IonIcon aria-hidden="true" icon={icons.chatbox} className="selected" />
              <IonIcon aria-hidden="true" icon={icons.chatboxOutline} className="unselected" />
            </IonTabButton>
            ... more of the same
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

Then in the components like <MessagesTab>

const MessagesTab: React.FC<RouteComponentProps> = ({ match }) => {
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route exact path={`/:tab(messages)`} component={MessagesMain} />
        <Route exact path={`/:tab(messages)/chat/:id`} component={Chat} />
        <Route exact path={`/:tab(messages)/new`} component={NewChat} />
      </IonRouterOutlet>
    </IonPage>
  );
};

And the pages themselves are pretty simple:

const ApplicationInfo: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton></IonBackButton>
          </IonButtons>
          <IonTitle>Application Info</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        ... content
      </IonContent>
    </IonPage>
  );
};

I see other topics talking about rendering bugs with Ionic/React but this seems too fundamental to be a bug in Ionic and i’m assuming i’m doing something wrong here.

Is there something i’m doing wrong here?

2

I don’t understand why you’re defining the path like this. Have you tried using /messages, /messages/tab/:id, etc.?

3

I saw this in the docs:

Will try to remove the :tab() bit and see if that fixes it.

edit

Making it just /messages/ results in the same thing.

edit

It seems that declaring all child routes of /messages/ where i declare the parent /messages/ route is the only way.