TanStackT
TanStack•12mo ago•
23 replies
forward-apricot

How to share a lazy-loaded route across multiple parent routes?

I have three journeys:

const journey1 = createRoute({ getParentRoute: () => rootRoute, path: "/journey1" });
const journey2 = createRoute({ getParentRoute: () => rootRoute, path: "/journey2" });
const journey3 = createRoute({ getParentRoute: () => rootRoute, path: "/journey3" });


I also have a YourDetails page that should be accessible in all three journeys, and I'm trying to reuse the same lazy-loaded route:

export const Route = createLazyRoute('/journey1/your-details')({
  component: YourDetails,
});

export default function YourDetails(...)


How can I share a lazily loaded route (YourDetails) across multiple parent routes in TanStack Router?

I want /journey1/your-details, /journey2/your-details, and /journey3/your-details to all use the same YourDetails component.

Any suggestions? Thanks! 🙌
Was this page helpful?