T
TanStack•7mo ago
like-gold

Provide a different basepath for a set of subcomponents

Hello, I need to use a different basepath for some subcomponents so their inner <Link> always starts with that basepath. I first thought I could use a RouterContextProvider as this 
const ForSubComponent = () => {
  const router = useRouter();
  return (
    <RouterContextProvider router={router} basepath="something-different">
      <Outlet />
    </RouterContextProvider>
  )
}
const ForSubComponent = () => {
  const router = useRouter();
  return (
    <RouterContextProvider router={router} basepath="something-different">
      <Outlet />
    </RouterContextProvider>
  )
}
and it kinda work since all sub links started with "something-different", but also, all other links (outside) were impacted with that basepath. Do you see a solution for me ?
1 Reply
like-gold
like-goldOP•7mo ago
I also tried 
const ForSubComponent = () => {
  const router = useRouter();
  const ContextProvider = getRouterContext().Provider
  return (
    <ContextProvider value={{...router, basepath: "something-different" }} >
      <Outlet />
    </ContextProvider>
  )
}
const ForSubComponent = () => {
  const router = useRouter();
  const ContextProvider = getRouterContext().Provider
  return (
    <ContextProvider value={{...router, basepath: "something-different" }} >
      <Outlet />
    </ContextProvider>
  )
}
and if I use useRouter() in sub components, I get that different basepath. But Link components in those subcomponents seems to get the initial basepath (defined in the router) Ok found a solution by overriding buildLocation() and navigate() methods... If someone struggle with the same issue : https://github.com/Khyonn/tanstackrouter-modulefederation/blob/master/host/src/components/BasepathContext.tsx

Did you find this page helpful?