Skip to content

fix(router): support anchor fragments in href#31172

Open
ShaneK wants to merge 1 commit into
mainfrom
FW-6958
Open

fix(router): support anchor fragments in href#31172
ShaneK wants to merge 1 commit into
mainfrom
FW-6958

Conversation

@ShaneK
Copy link
Copy Markdown
Member

@ShaneK ShaneK commented May 27, 2026

Issue number: resolves #19566


What is the current behavior?

Clicking an ion-router-link whose href contains a #fragment (e.g. /catalog#pens) fails to navigate and logs not part of the routing set. parsePath in core/src/components/router/utils/path.ts only splits on ?, so the fragment gets folded into the last path segment and no registered route matches. Even when navigation succeeds, the matching anchor is never scrolled into view.

What is the new behavior?

parsePath extracts the fragment as a separate field, and writeSegments writes it back onto the URL via pushState. Routes match against the path segments alone, so /catalog#pens resolves to the /catalog route as expected.

After writeNavStateRoot resolves, the router polls a few animation frames for an element matching the fragment inside the active page, then smooth-scrolls to it via ion-content.scrollToPoint, falling back to Element.scrollIntoView when the target sits outside ion-content. A fragmentScrollToken cancels any in-flight scroll the moment a newer setSegments runs.

Does this introduce a breaking change?

  • Yes
  • No

Other information

The fragment lookup scopes to the last .ion-page:not(.ion-page-hidden) in the document. Nested outlets can have multiple non-hidden pages mounted at once, and an identically-named anchor on a parent page would otherwise win over the leaf the user is viewing.

Preview pages:

@ShaneK ShaneK requested a review from a team as a code owner May 27, 2026 19:58
@ShaneK ShaneK requested a review from BenOsodrac May 27, 2026 19:58
@vercel
Copy link
Copy Markdown

vercel Bot commented May 27, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 27, 2026 9:32pm

Request Review

Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, left a question

test('should route when ion-router-link href contains a fragment', async ({ page }, testInfo) => {
testInfo.annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this issue number correct? The PR description has 19566.

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.

bug: ion-router-link can't link to another page's anchor

2 participants