How to render Link component as div (and not as <a/> )

[tmax22]

if you wrap Link with other a elements you will get:

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

I 'component' prop could be amazing:

<Link
            // component={"div"}  <-- not possible !
            to={"/"}
            style={{
              textDecoration: "none",
              color: "inherit",
              display: "flex",
              alignItems: "center",
            }}
          >
// childrens...
</Link

but looking at the source code a can see that currently 'a' is hard coded in the type:

export const Link: LinkComponent<'a'>

and the host component can be overwritten in runtime with the undocumented _asChild prop:

it can work for now as workaround, but this is quite annoying

 <Link
            // component={Link}
            to={"/"}
            style={{
              textDecoration: "none",
              color: "inherit",
              display: "flex",
              alignItems: "center",
            }}
            _asChild={'div'} <-- fix the runtime warning issue but creates typescript error
          >

My workaround

for now, this is the workaround component I'm using

import React from "react";
import {
  type LinkProps as TanstackLinkProps,
  Link as TanstackLink,
} from "@tanstack/react-router";

interface LinkProps extends TanstackLinkProps {
  component?: React.ElementType;
}

const Link = (props: LinkProps) => {
  const { component, ...rest } = props;
  return (
    <TanstackLink
      style={{
        textDecoration: "none",
        color: "inherit",
        display: "flex",
        alignItems: "center",
        cursor: "pointer",
      }}
      // @ts-expect-error - https://github.com/TanStack/router/discussions/1338
      _asChild={component}
      {...rest}
    />
  );
};

export default Link;

with exact improved typing:

import React from "react";
import {
  Link as TanstackLink,
} from "@tanstack/react-router";

type LinkProps = Parameters<typeof TanstackLink>[0] & {
  component?: React.ElementType;
};

const Link = (props: LinkProps) => {
  const { component, ...rest } = props;
  return (
    <TanstackLink
      style={{
        textDecoration: "none",
        color: "inherit",
        display: "flex",
        alignItems: "center",
        cursor: "pointer",
      }}
      // @ts-expect-error - https://github.com/TanStack/router/discussions/1338
      _asChild={component}
      {...rest}
    />
  );
};

export default Link;