Render issues with React (Routing?)

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


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 (
            <Route exact path="/home" component={HomePage} />
            <Redirect exact from="/" to="/home" />
            <Route path="/messages" component={MessagesTab} />
          <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 tab="messages" href="/messages">
              <IonIcon aria-hidden="true" icon={icons.chatbox} className="selected" />
              <IonIcon aria-hidden="true" icon={icons.chatboxOutline} className="unselected" />
            ... more of the same

Then in the components like <MessagesTab>

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

And the pages themselves are pretty simple:

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

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?

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

I saw this in the docs:

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


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


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