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

[tame dust]

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

[warped oyster]

guess you need three different routes that reference the same component

[tame dust]

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

[warped oyster]

somehow you need to tell the router how to resolve paths to routes

maybe your "journey" routes could just be a path param?

[warped oyster]

btw I would recommend using filebased routing, its just nicer to work with

[tame dust]

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

and

/onboarding/user/your-details

[warped oyster]

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 dust]

do path parameters work with layouts?

[warped oyster]

they should

what do you want to do?

[tame dust]

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,
  },
];

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

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

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

[warped oyster]

using file based routing is not an option?

would automatically handle code splitting

[tame dust]

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

[warped oyster]

but this is using fileroutes right?

[tame dust]

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.

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

[warped oyster]

probably @pallid stone is best to help out with monorepo stuff

[pallid stone]

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 dust]

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

[pallid stone]

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