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" });

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

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(...)

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

export default function YourDetails(...)

How can I share a lazily loaded route (

YourDetails

YourDetails

) across multiple parent routes in TanStack Router?

I want

/journey1/your-details

/journey1/your-details

/journey2/your-details

/journey2/your-details

, and

/journey3/your-details

/journey3/your-details

to all use the same YourDetails component.

Any suggestions? Thanks!

TanStack•13mo 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" });

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

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(...)

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

export default function YourDetails(...)

How can I share a lazily loaded route (

YourDetails

YourDetails

) across multiple parent routes in TanStack Router?

I want

/journey1/your-details

/journey1/your-details

/journey2/your-details

/journey2/your-details

, and

/journey3/your-details

/journey3/your-details

to all use the same YourDetails component.

Any suggestions? Thanks!

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads