TanStackT
TanStack•2y ago
near-sapphire

Sharing routes between parents (or loading parallel routes)

I have following pages in my root:
/dashboard
/abc-detail/$id
/xyz-detail/$id

All of those pages use a set of modals, but lets simplify it to one:
modal/summary/$someId

I'd like to bring up that modal from any of the three routes (and not necessarily from any other routes, but that's optional requirement)
I cannot figure out the proper way to do it, from my understanding I'd need to load the modal and the page in the outlet in parallel or those 3 routes would need to clone the route config of the modal (note that in the actual app there's several of them).

Example route of mine:
export const summaryModalRoute = createRoute({
  getParentRoute: () => index,
  path: 'modal/summary/$someId',
  component: () => {
    const { promise } = summaryModalRoute.useLoaderData();
    return <SummaryModal summary={promise} />;
  },
  gcTime: 0,
  staleTime: 0,
  loader: match => summaryLoader(match.params.someId),
});
Was this page helpful?