Navigation Menu with Tanstack Router

[teddybee]

trafficstars

I have an issue with Tanstack router integration to a React SPA. Could somebody help about it? My Navbar component looks like this. Unfortunately it doesn`t want to navigate between pages.

import { cn } from "@/lib/utils";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@radix-ui/react-navigation-menu";
import { Link } from "@tanstack/react-router";
import { navigationMenuTriggerStyle } from "../ui/navigation-menu";

type Props = { className?: string };

export const Navbar= ({ className }: Props) => {
  return (
    <NavigationMenu className={cn("", className)} >
      <NavigationMenuList className="flex gap-3">      
        <NavigationMenuItem>
          <Link href="/" >
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Home
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href="/about" >
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              About
            </NavigationMenuLink>
          </Link>
          </NavigationMenuItem>        
      </NavigationMenuList>
    </NavigationMenu>
  );
};

The error in the console:

VM136140:1 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

[teddybee]

PS: The navigation problem is solved by to property

<Link to="/">

Unfortunately the error is still shown in console.

[mubin-khalid]

@teddybee did you try to set legacyBehavior and passHref on Link? See here, at the bottom, with NextJs example.

[arsaizdihar]

use asChild props

<NavigationMenuLink className={navigationMenuTriggerStyle()} asChild>
   <Link to="/about">
      About
    </Link>
</NavigationMenuLink> 

[teddybee]

@mubin-khalid There are no such props in tanstack-router's Link.

@arsaizdihar Thank you, it solved the error/warning.