fix(navlink): Replace (don't merge) className of active link

.changesets/10342.md

@@ -0,0 +1,52 @@
+- fix(navlink): Replace (don't merge) className of active link (#10342) by @Tobbe
+
+We should be replacing className with `activeClassName` for the active link. Currently we try to merge them, but that makes it very difficult for end users to have full control over exactly what classes are applied to active links
+
+Fixes https://github.com/redwoodjs/redwood/issues/10296
+
+## Before
+
+```tsx
+<NavLink
+  to={routes.air()}
+  className="inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300"
+  activeClassName="active inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 dark:border-blue-500 dark:text-blue-500"
+>
+  Air
+</NavLink>
+```
+
+The `<NavLink>` above would get the following classes if it was the active link
+`inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300 active inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 dark:border-blue-500 dark:text-blue-500`
+
+## After
+
+That same `<NavLink>` now only gets the `activeClassName` classes `active inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 dark:border-blue-500 dark:text-blue-500`
+
+
+## Breaking
+
+If you were relying on the merging behavior you will now have to copy all classes from `className` and also include them in `activeClassName`.
+So if you had this:
+
+```tsx
+<NavLink
+  to={routes.home()}
+  className="border-b-2"
+  activeClassName="text-red-200"
+>
+  Air
+</NavLink>
+```
+
+you will now have to change it to:
+
+```tsx
+<NavLink
+  to={routes.home()}
+  className="border-b-2"
+  activeClassName="border-b-2 text-red-200"
+>
+  Air
+</NavLink>
+```

packages/router/src/navLink.tsx

@@ -2,10 +2,11 @@
 
 import { forwardRef } from 'react'
 
-import { Link, type LinkProps } from './link'
+import { Link } from './link'
+import type { LinkProps } from './link'
 import { useMatch } from './useMatch'
-import type { FlattenSearchParams } from './util'
 import { flattenSearchParams } from './util'
+import type { FlattenSearchParams } from './util'
 
 interface NavLinkProps extends LinkProps {
   activeClassName: string
@@ -36,16 +37,13 @@ export const NavLink = forwardRef<
       searchParams,
       matchSubPaths,
     })
-    const theClassName = [className, matchInfo.match && activeClassName]
-      .filter(Boolean)
-      .join(' ')
 
     return (
       <Link
         ref={ref}
         to={to}
         onClick={onClick}
-        className={theClassName}
+        className={matchInfo.match ? activeClassName : className}
         {...rest}
       />
     )