Link component outside main router context

[benjavicente]

Hi! It is possible to use the link component in some way, outside the <RouterProvider /> that matches the routes?

I tried

import { RouterProvider, createRouter, Link, RouterContextProvider, type LinkComponent } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

export const modalRouter = createRouter({ routeTree });

export function Modal() {
  return <RouterProvider router={modalRouter} />;
}

export const ModalLinkFromOutside: LinkComponent<"a"> = (props) => {
  return (
    <RouterContextProvider router={modalRouter}>
      <Link {...props} />
    </RouterContextProvider>
  );
};

export function MinimalExample() {
  // The goal it to render something like this in Astro:
  return (
    <>
      <Modal />
      <ModalLinkFromOutside to="/open">Open modal</ModalLinkFromOutside>
    </>
  );
}

and got Invariant failed: Could not find the nearest match! when the ModalLinkFromOutside is rendered.

---

Why I am doing this? I want to build a static site in Astro with FULL client side navigation in a modal (don't ask the server needed HTML/JS on navigation in it). The router layer is only added to the modal, and links outside the modal should open it.