T
TanStack•13mo ago
loud-coral

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

Hi everyone, I'm working on a monorepo with multiple micro-frontends using single-spa and module federation. I'm using TanStack Router for routing within each micro-frontend. I'm trying to figure out the best way to extend the <Link> component so it can navigate between these micro-frontends. I have a basic implementation that removes the basepath when ignoreBasePath is set to true, but I'm not sure if this is the most efficient or recommended approach. Here's my current code: 
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} />;
  }
};
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} />;
  }
};
Does anyone have experience with this scenario? Are there any best practices or recommended patterns for navigating between micro-frontends using TanStack Router? Thanks in advance for your help!
2 Replies
ambitious-aqua
ambitious-aqua•13mo ago
how is the route tree built? a single one or one for each micro front end?
stormy-gold
stormy-gold•12mo ago
@Manuel Schiller i did not originally ask this question, but I'm doing something similar. What if I was building the route tree for each micro front end? (And the host app as well)

Did you find this page helpful?