`A` active does not account for search params

[Akkuma]

Describe the bug

A list of links that are used for filtering content will result in all of them having an active class and all of them having aria-current="page"

<A href="/?example=1">1</A>
<A href="/?example=2">2</A>
<A href="/?example=3">3</A>

The problem is that all 3 links cannot be active here at the same time and aria-current fails to differentiate this difference. The workaround here would be to build a custom A that also takes into account the search params.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-hhpgedwq?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Create multiple links that update search params
2. See all are considered active and all have an invalid aria-current

Expected behavior

Some way to force active to account for the search params

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 132

Additional context

No response

[ryansolid]

Search query parameters are tricky in that they aren't generally mutually exclusive. I see in this example using the same query paramter they are. But speaking more generally under what conditions do they match or not match? Is it if it is a complete match? Do you do it on partial matches? I wasn't sure so never implemented it. I'm gathering partial matching would be considered the same? Maybe it needs to be configurable by option? I'd be interested in prior art here.

[Akkuma]

I checked against tanstack router and it has several options to help support this https://tanstack.com/router/latest/docs/framework/react/guide/navigation#active-options. It defaults to specifically checking the search and every property defined in the search object must match. If you want to explicitly exclude props from triggering the active state if it is a partial match you must use explicitUndefined and mark the prop as undefined in the search object.

TLDR: Search works OOTB intuitively and you blacklist props you want to prevent from being considered a match.

Demo: https://stackblitz.com/edit/tanstack-router-rhftaozp?file=src%2Fmain.tsx