Using multiple routers in different packages with each other

[mhagendoorn-9292]

I'm currently building a project that uses a variety of packages. Each of these packages has it's own instance of @tanstack/react-router. I'm trying to create a <Link> between two of these packages. Package A does not know of the existance of the router in package B.

I want to do link between these packages via TanStack because then you

1. have type safety and
2. it uses the stringify and parse methods in the router, so I don't have to manually change / to _ in a string each time, which is needed for some of the values in the URL.

The problem I'm having is that, since these are two different routers, the <Link> in package A does not know of the routes in package B. To fix this, I wrapped the <Link> in a <RouterContextProvider>. I import the Router from package B into package A and supply it to the Context, This way, you get type safety, and it neatly performs the functionalities in stringify and parse.

<RouterContextProvider router={PackageBRouter}>
  <Link
      to="/$locationType/$locationId"
      params={{
        locationId: stop.id!,
        locationType: stop.category!.toLowerCase(),
      }}
      className="text-black hover:underline"
   >
      {stop.displayName}
  </Link>
</RouterContextProvider>

The above code gives me this:

<a href="/[package B path]/[locationType]/[locationId]" class="text-black hover:underline" data-status="active" aria-current="page">[displayName]</a>

Exactly as I wanted it!

Now, the following problem arises: as soon as I click the URL, the URL in the browser is updated to the correct one and in the developer tools I can see that the API calls that happen in package B are actually performed. However, the browser never shows the correct page; it stays on the page in package A. If I then select the URL in the browser and press [Enter] or reload the page, the page of package B loads as expected. If I then go back to the previous package A via the browser back button, I get shown the notFoundComponent that I set in package B, while I go back to package A.

I'm kinda stuck on how to make what I want to. Is what I want even possible with TanStack? Thanks!

I'm currently on version 1.46.0.

[schiller-manuel]

can you please provide a minimal complete example by forking one of the examples on stackblitz?