fix(react): router creates new view instances of parameterized routes

[sean-perkins]

Issue number: Resolves #26524

---

Definitions

Parameterized routes: A route that includes one or more variables in the path segments, such as /form/:index.

What is the current behavior?

When an application routes from a parameterized route, to an intermediary route, to the same parameterized route, but with a different value/url, Ionic's routing logic is incorrectly reusing the view item from the first instance of the parameterized route instead of calculating that the matched path is different. This results in the wrong view item being recycled and rendered.

Another way of representing it:

• User navigates to /form/0 which resolves FormPage
• User enters 0 into the form and submits the form
• User navigates to /link, which resolves LinkPage
• User navigates to /form/1, which resolves FormPage
  • However, instead of creating a new instance of FormPage it is reusing the instance of FormPage from /form/0 which includes the form having 0 in the input.
  • The user now sees a "new view", but with cached data in the form.

This is not expected or desired.

What is the new behavior?

• Ionic's routing logic will validate if the entering view item matches the match route data before reusing it. This results in new instances of the view item being constructed when using parameterized routes.

Kapture.2023-11-30.at.15.05.04.mp4

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 7.5.8-dev.11701383555.17254408

[aeharding]

yeeted this into production for Voyager last night at it's working perfectly :)

[averyrousseau]

🎉