T
TanStack•2y ago
adverse-sapphire

Sharing routes between parents (or loading parallel routes)

I have following pages in my root: 
/dashboard
/abc-detail/$id
/xyz-detail/$id
/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
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),
});
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),
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?