From 0ed335e8780860a74ae3ccf135b9de986ceaed68 Mon Sep 17 00:00:00 2001 From: Vianney MORAIN Date: Thu, 7 May 2026 14:42:05 +0200 Subject: [PATCH] fix(react-router): exclude same-page hash anchors from NavLink Links like /#section share pathname "/" with the root page, so React Router's NavLink marks them all as aria-current="page" in SSR. This causes [aria-current=page] styles to apply to every hash anchor on the homepage, making hover/active indicators always visible. Plain is correct here since hash anchors don't cross page boundaries. --- packages/sdk-components-react-router/src/link.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/sdk-components-react-router/src/link.tsx b/packages/sdk-components-react-router/src/link.tsx index dd5bc824fdbc..6c0c2d9966af 100644 --- a/packages/sdk-components-react-router/src/link.tsx +++ b/packages/sdk-components-react-router/src/link.tsx @@ -26,7 +26,12 @@ export const Link = forwardRef((props, ref) => { // remix appends ?index in runtime but not in ssr href === "" || href.startsWith("?") || - (href.startsWith("/") && href.startsWith(assetBaseUrl) === false) + (href.startsWith("/") && + href.startsWith(assetBaseUrl) === false && + // Same-page hash anchors (e.g. /#section) share pathname "/" with every + // root page — NavLink would mark them all as aria-current="page" in SSR. + // Use a plain anchor instead; hash navigation doesn't cross page boundaries. + href.startsWith("/#") === false) ) { // In the future, we will switch to the :local-link pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link). (aria-current="page" is used now) // Therefore, we decided to use end={true} (exact route matching) for all links to facilitate easier migration.