bug: IonRouterOutlet does not handle recursive routes/paths

[cdes]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.6.0

Current behavior:

Consider a page component that shows a user profile and a list of friends.
When tapping on a friend, the app navigates to a new route to display that friend's profile along with a list of friends using the same page component. In other words, recursive routing.

Expected behavior:

Ionic navigation should keep showing the screen and building the url as you go deeper in the recursive path.

I've used this as a guide:
https://reactrouter.com/web/example/recursive-paths

Steps to reproduce:

Related code:

A sample application via code sandbox
https://codesandbox.io/s/ionic-recursive-route-x9r8x?file=/src/app.tsx

Other information:

Ionic info:

Versions

"@ionic/react": "5.6.0",
"@ionic/react-router": "5.6.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-router-dom": "5.2.0",

[liamdebeasi]

Thanks for the issue. In the react-router example you provided, the example author adds the following code which is necessary for this functionality to work:

<Route path={`${url}/:id`}>
  <Person />
</Route>

This code was not found in your CodeSandbox, and adding it seems to make it work. Can you give that a shot?

[cdes]

@liamdebeasi Unfortunately no. I've tried that before and nothing appears, which means that the route was not matched.

I've also updated the code sandbox code.

[liamdebeasi]

Hmm, I am not sure that usage is correct. Your example wraps the component template in a Route component, but the example on the react-router docs places the Route component inside of the template.

I would recommend placing the Route inside of the template as that was what worked for me. So your code would look something like this:

<IonPage>
  <IonHeader collapse="condense">
    <IonToolbar>
      <IonButtons slot="start">
        <IonBackButton />
      </IonButtons>
      <IonTitle>Friends App</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <div
      style={{
        display: "flex",
        alignItems: "center",
        padding: 16
      }}
    >
      <IonAvatar
        style={{
          width: 64,
          height: 64
        }}
        slot="start"
      >
        <img src={person?.avatar} />
      </IonAvatar>
      <IonText
        style={{
          marginLeft: 16,
          fontSize: 32
        }}
      >
        {person.name}
      </IonText>
    </div>
    <IonList>
      <IonListHeader
        style={{
          fontSize: 16,
          textTransform: "uppercase"
        }}
      >
        Friends
      </IonListHeader>
      {person.friends.map((id) => (
        <IonItem
          key={id}
          routerLink={`${url}/${id}`}
          routerDirection="forward"
        >
          <IonLabel>{find(id).name}</IonLabel>
        </IonItem>
      ))}
    </IonList>
  </IonContent>

  <Route path={`${url}/:id`}>
    <User />
  </Route>

</IonPage>

Note the Route immediately before the closing IonPage tag.

[cdes]

Interesting... navigation works but the transitions are not

[cdes]

I've managed to create another example for recursive route. The transition works, but this has a different issue.

The back button only goes back ones and then disappears.

https://codesandbox.io/s/ionic-recursive-route-forked-9u5ot?file=/src/app.tsx

[JayBizzle]

Just as a side note, i think this issue is related to #22662

[liamdebeasi]

I've managed to create another example for recursive route. The transition works, but this has a different issue.

The back button only goes back ones and then disappears.

https://codesandbox.io/s/ionic-recursive-route-forked-9u5ot?file=/src/app.tsx

Thanks! This was helpful. Looks like this is the same issue as #22692, so I will close this in favor of the issue I linked to. I have an idea of how to fix this issue, so I will try to get a dev build for you to test today/tomorrow.

[liamdebeasi]

I posted a dev build on this thread: #22692 (comment)

[cdes]

@liamdebeasi IT WORKS!

https://codesandbox.io/s/ionic-recursive-route-570-dev2021031813498ac4d12-wzoyl

[liamdebeasi]

Glad it's working now! I will try to get that PR merged in soon.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.