Check for whether a search param is explicitly *not* set

[MayaRainer]

I'm writing a component that renders a list of tab links, only one of which should be active at a time. In a specific use case, one of these links should only be active when a search parameter set by the others isn't set.

In #1969, the Link behaviour was changed to treat an explicitly undefined property the same as the absence of the property - but that seems to leave us without a way of explicitly validating their absence. Using exact kind of works, but only when no other search parameters are involved.

Example (these are actually rendered in a list as it's a reusable component, but will just add two each here for simplicity):

<Link search={{ param: "value" }}>...
<Link search={{ param: undefined }}>... // will be active even when `param` is set

<Link search={{ param: "value" }} activeOptions={{ exact: true }}>...
<Link search={{ param: undefined }} activeOptions={{ exact: true }}>... // will not be active even when `param` is set, but also not be active when another search param like `page` is set

const location = useLocation();
...
<Link
  search={{ ...location.search, param: "value" }}
  activeOptions={{ exact: true }}
>...
<Link
  search={{ ...location.search, param: undefined }}
  activeOptions={{ exact: true }}
>... // will not be active even when `param` is set, and ignores other search params, but makes it impossible to remove other search params like `page`

Lmk if I'm missing something, but I haven't been able to find something that really works for this use case. Thanks in advance!

[schiller-manuel]

we could make the meaning of undefined inactiveOptions configurable

[schiller-manuel]

I implemented this in #2592

usage:

<Link search={{ param: undefined }} activeOptions={{ explicitUndefined: true }}>