Navigating between Micro-Frontends with TanStack Router's <Link> component

import { FC, ReactNode } from "react";
import {
  createLink,
  Link as TanStackLink,
  LinkProps,
  useRouter,
} from "@tanstack/react-router";

interface ExtendedLinkProps extends LinkProps {
  ignoreBasePath?: boolean;
}

export const Link: FC<ExtendedLinkProps> = ({
  ignoreBasePath = false,
  ...restProps
}) => {
  const router = useRouter();

  if (ignoreBasePath) {
    const CustomLink = createLink(
      ({
        href = "",
        children,
        ...rest
      }: {
        href: string;
        children: ReactNode;
        [key: string]: unknown;
      }) => {
        const basePath = router.basepath || "";
        const modifiedHref = href.replace(basePath, "");
        return (
          <a href={modifiedHref} {...rest}>
            {children}
          </a>
        );
      }
    );
    return <CustomLink {...restProps} />;
  } else {
    return <TanStackLink {...restProps} />;
  }
};