Skip to content

feat(nav): remove ion-router integration#31266

Open
ShaneK wants to merge 2 commits into
major-9.0from
FW-6976
Open

feat(nav): remove ion-router integration#31266
ShaneK wants to merge 2 commits into
major-9.0from
FW-6976

Conversation

@ShaneK

@ShaneK ShaneK commented Jul 13, 2026

Copy link
Copy Markdown
Member

Issue number: internal


What is the current behavior?

ion-nav doubles as an ion-router outlet. On load, nav.tsx checks document.querySelector('ion-router') to set a useRouter flag, and ion-nav is listed in the router's OUTLET_SELECTOR. When the router drives it, ion-nav exposes internal setRouteId()/getRouteId() methods, runs router.canTransition() guards inside queueTrns, and calls router.navChanged() on a successful transition so that push/pop, ion-nav-link, and swipe-to-go-back all update the URL. This couples an imperative stack component to URL-based routing

What is the new behavior?

ion-nav is now a standalone imperative stack-navigation component with no ion-router integration. It implements ComponentInterface instead of NavOutlet and drops useRouter, the setRouteId()/getRouteId() methods, the canTransition() guard check, the navChanged() URL update, the root-attribute-with-router warning, and the updateURL nav option. The router no longer lists ion-nav in OUTLET_SELECTOR, so an ion-nav placed inside an ion-router is no longer discovered or driven as a routed outlet

Dropping ion-nav from OUTLET_SELECTOR exposed a hang: a page with an ion-router but no ion-router-outlet or ion-tabs (the #24641 pattern) left waitUntilNavNode() waiting forever, so the router's componentWillLoad never settled and the app never signalled that it finished loading. waitUntilNavNode() now resolves on ionNavWillLoad or a 500ms timeout, and warns in dev when no outlet is found

Does this introduce a breaking change?

  • Yes
  • No

Apps that relied on ion-nav to update the URL (pushing components and expecting the browser URL to change, or having router guards run on nav transitions) should use ion-router-outlet for URL-based routing. An ion-nav can still be used inside a routed page for local, URL-less stack navigation. See the Nav section in BREAKING.md for the migration path.

Other information

BREAKING.md is updated with a new Nav section and route.tsx doc now lists ion-router-outlet instead of ion-nav as the navigation outlet

Preview (nav routing test page):

@ShaneK ShaneK requested a review from a team as a code owner July 13, 2026 21:54
@ShaneK ShaneK requested a review from OS-jacobbell July 13, 2026 21:54
@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Jul 13, 2026 10:09pm

Request Review

@github-actions github-actions Bot added package: core @ionic/core package package: react @ionic/react package labels Jul 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant