fix(react-router): sync child props through Routes wrapper on re-render

[ShaneK]

Issue number: resolves #31157 (the RR6 version of this issue, anyway)

---

What is the current behavior?

When a parent re-renders with new props for a child rendered inside an IonRouterOutlet, the child's props go stale. ReactRouterViewStack re-syncs the stored viewItem.reactElement by iterating ionRouterOutlet.props.children directly with React.Children.forEach and matching each child's path against the stored view items.

When the routes are wrapped in a <Routes> element (the RR6 equivalent of the v5 <Switch>), that wrapper has no path of its own, so nothing matches and the child element is never refreshed. The stored reactElement keeps its original props, so state passed down from the parent never reaches the child.

What is the new behavior?

The sync now runs the outlet's children through extractRouteChildren, which unwraps the <Routes> wrapper and returns the actual <Route> elements with their paths. Those match the stored view items, so the reactElement is refreshed on each re-render. This is the same unwrapping already used on the render path elsewhere in the file, so direct-child routes and <Routes>-wrapped routes now behave the same. Prop changes from a parent re-render reach the child in both shapes.

Does this introduce a breaking change?

• Yes
• No

Other information

Preview (React Router test app):

• Routes wrapper: https://ionic-framework-git-fix-sync-props-ionic1.vercel.app/react-router/props-update-routes/child
• Direct children: https://ionic-framework-git-fix-sync-props-ionic1.vercel.app/react-router/props-update-direct/child

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jun 17, 2026 2:59pm