tame-yellow

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 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) 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! 🙌

17 Replies

adverse-sapphire•7mo ago

guess you need three different routes that reference the same component

tame-yellowOP•7mo ago

I actually have 10 routes that need to be shared across 3 journeys. Does this mean I have to create 30 separate routes?

adverse-sapphire•7mo ago

somehow you need to tell the router how to resolve paths to routes maybe your "journey" routes could just be a path param? btw I would recommend using filebased routing, its just nicer to work with

tame-yellowOP•7mo ago

Thank you. is it possible to make the path parameter optional? Then I can have something like this:

/onboarding/user/activate/your-details // activate is path parameter

/onboarding/user/activate/your-details // activate is path parameter

and

/onboarding/user/your-details

/onboarding/user/your-details

adverse-sapphire•7mo ago

not yet unfortunately. optional path parameter will be implemented, but they are not available right now for now, you either have to duplicate your routes or use query params

tame-yellowOP•7mo ago

do path parameters work with layouts?

adverse-sapphire•7mo ago

they should what do you want to do?

tame-yellowOP•7mo ago

I have 4 journeys, each with a different structure, but they share some pages, such as the Your Details page. Since I'm using code-based routing, I can reuse routes across multiple journeys. for example

const activationJourney = [ // simplified
  {
    route: 'details',
    component: DetailsPage,
  },
  {
    route: 'delivery-address',
    component: DeliveryAddressPage,
  },
];

const activationJourney = [ // simplified
  {
    route: 'details',
    component: DetailsPage,
  },
  {
    route: 'delivery-address',
    component: DeliveryAddressPage,
  },
];

Then I can also have a different journey that shares the details page

const continueWithOTP = [
  {
    route: 'details',
    component: DetailsPage,
  },
  {
    route: 'otp',
    component: OTPPage,
  },
];

const continueWithOTP = [
  {
    route: 'details',
    component: DetailsPage,
  },
  {
    route: 'otp',
    component: OTPPage,
  },
];

and later on, create routes for each journey

const activationRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/activation'
});

const activationRoutes = activationJourney.map(({ route, component }) => {
  return createRoute({
    getParentRoute: () => activationRoute,
    component,
    path: route
  });
});

const activationRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/activation'
});

const activationRoutes = activationJourney.map(({ route, component }) => {
  return createRoute({
    getParentRoute: () => activationRoute,
    component,
    path: route
  });
});

Same for continueWithOTP, this works well but I'm trying to implement code splitting and this methods is causing a lot of issues, since I have to use createLazyRoute in your details page, using the full path to the page. for example

export const Route =  createLazyRoute('/activation/details')({
component: DetailsPage,
});

export const Route =  createLazyRoute('/activation/details')({
component: DetailsPage,
});

adverse-sapphire•7mo ago

using file based routing is not an option? would automatically handle code splitting

tame-yellowOP•7mo ago

I'm using a monorepo and following this example https://tanstack.com/router/v1/docs/framework/react/examples/router-monorepo-simple-lazy

React TanStack Router Router Monorepo Simple Lazy Example | TanStac...

An example showing how to implement Router Monorepo Simple Lazy in React using TanStack Router.

adverse-sapphire•7mo ago

but this is using fileroutes right?

tame-yellowOP•7mo ago

yes, I've changed to file routes and I get the same issue

 Types of property 'path' are incompatible.
                    Type '"/merchant/set-password"' is not assignable to type '"/merchant/reset-password-otp"'.ts(2322)
app.tsx(7, 50): The expected type comes from the return type of this signature.

 Types of property 'path' are incompatible.
                    Type '"/merchant/set-password"' is not assignable to type '"/merchant/reset-password-otp"'.ts(2322)
app.tsx(7, 50): The expected type comes from the return type of this signature.

because of the path I set when I use createLazyRoute('')

adverse-sapphire•7mo ago

probably @Nicolas Beaussart is best to help out with monorepo stuff

rival-black•7mo ago

Hey 👋 Just to make sure I get it, you are trying to reuse the same components in different routes? The reason I has to have strict types is because the id of create lazy routes needs to match the route at runtime

tame-yellowOP•7mo ago

Yes, I want to resuse the same page in different journeys.

rival-black•7mo ago

https://stackblitz.com/edit/tanstack-router-cibuinda?file=packages%2Fpost-feature%2Fsrc%2FAnyRoute.tsx Is that what you need ? Two files to look at, this AnyRoute that is my route that I resued across /a /b /c (like your password one), and then main in the app where the difference is, instead of importing a lazy route, we create one after the import so it's still lazy, still linked to the correct route id but without having to re define and export 3 different lazy routes

Nicolas Beaussart

StackBlitz

Router Router Monorepo Simple Lazy With Same page resued - StackBlitz

Run official live example code for Router Router Monorepo Simple Lazy, created by Tanstack on StackBlitz

tame-yellowOP•7mo ago

Yes, thank you.

Gaming

Programming

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

Did you find this page helpful?