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.

[ViewableGravy]

This is just an observation having glanced over the internals of tanstack router in the last few days. The RouterProvider component internally just returns

<RouterContextProvider router={router} {...rest}>
      <Matches />
</RouterContextProvider>

And in the Matches component, it wraps some suspense boundaries and some other jazz. But most importantly, it wraps everything in matchContext.Provider passing in the first match. I'm pretty sure that the link component uses this which would be why it's crashing, so potentially you could consider doing something like this?

const InnerProvider = ({ children }) => {
  const matchId = useRouterState({
    select: (s) => {
      return s.matches[0]?.id
    },
  }) 

  return (
    <matchContext.Provider value={matchId}>
      {children}
    </matchContext.Provider>
  )
}

const MyProvider = ({ children ) => {
  return (
    <RouterContextProvider router={modalRouter}>
      <InnerProvider>
        {children}
      </InnerProvider>
    </RouterContextProvider>
  )
}