Is it possible to pass href to a child of Link, similarly to passHref in next/link?

[nicolomaioli]

Hi all!

I'm implementing a navigation menu with shadcn/ui. I am wrapping Link into a custom component and then render NavigationMenuLink with the asChild prop (see below).

However, reading the documentation for radix-ui it looks like they recommend doing it the other way around to ensure that accessibility is implemented properly: docs.

They provide an example with next.js Link, using the passHref and legacyBehavior props. Is there a way to achieve something similar?

I know very little about accessibility, so I might be overthinking it. This is my current implementation:

import type { ReactNode } from "react";
import type { Icon } from "@tabler/icons-react";
import type {
  AnyRoute,
  LinkProps,
  RegisteredRouter,
  RoutePaths,
} from "@tanstack/react-router";
import { Link } from "@tanstack/react-router";

import {
  cn,
  NavigationMenuItem,
  NavigationMenuLink,
  useSheetContext,
} from "@acme/ui";


export interface NavItemProps<
  TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = "",
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = "",
> {
  linkProps: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
    React.RefAttributes<HTMLAnchorElement>;
  className?: string;
  Icon?: Icon;
  children: ReactNode;
}


export const NavItem = ({
  linkProps,
  className,
  Icon,
  children,
}: NavItemProps) => {
  const { setOpen } = useSheetContext();

  return (
    <NavigationMenuItem className="!m-0" onClick={() => setOpen(false)}>
      <NavigationMenuLink asChild>
        <Link
          className={cn(
            "box-border flex flex-1 flex-row items-center gap-[10px] rounded-lg p-4 underline-offset-2 hover:bg-accent",
            className,
          )}
          activeProps={{
            className: "bg-blue-100 font-semibold underline hover:bg-blue-100",
          }}
          {...linkProps}
        >
          {Icon && <Icon className="h-[16px] w-[16px]" />}
          <div className={cn("text-base text-foreground")}>{children}</div>
        </Link>
      </NavigationMenuLink>
    </NavigationMenuItem>
  );
};

[SeanCassiere]

I don't think any is really wrong here.

With the pattern you are using, if you check the nodes in the DOM you should notice that all the radix props have been passed down to the <Link /> component.