primary-violet

<Link> in RouterContextProvider doesn't navigate to link

Hi,

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

@tanstack/react-router

. I'm trying to create a

<Link>

<Link>

between two of these packages. Since package A does not know of the existance of package B, I'm wrapping the URL in a

<RouterContextProvider>

<RouterContextProvider>

with the router being the router in the other package. All is well so far; I get the correct suggestions now and everything seems like it works.

Problem now is, when clicking the link in the browser, the URL in the browser actually gets changed to the correct one, but the browser never navigates away from the page. Is this something I am doing wrong? The

<a>

<a>

in the browser has all the correct attributes, so I'm kinda confused here.

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

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

TanStack•2y ago

primary-violet

<Link> in RouterContextProvider doesn't navigate to link

Hi,

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

@tanstack/react-router

. I'm trying to create a

<Link>

<Link>

between two of these packages. Since package A does not know of the existance of package B, I'm wrapping the URL in a

<RouterContextProvider>

<RouterContextProvider>

<a>

<a>

in the browser has all the correct attributes, so I'm kinda confused here.

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

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

<Link> in RouterContextProvider doesn't navigate to link

Similar Threads

<Link> in RouterContextProvider doesn't navigate to link

Similar Threads

Similar Threads

Similar Threads