stormy-gold

Catch all route for showing a modal over existing pages

I use TanStack router folder method (not programmatically). I have the following scenario, I have core routes: /home, /settings, /settings/preferences - as you can see - also deep nested routes. But I might have many core ones. And in my scenario, I want to show a modal in any such route - and over the page itself, not override, only if it ends with "/contact-info". So for example if my /settings/preferences page show some inputs and checkboxes, and I browse to /settings/preferences/contact-info -> it should show a dialog of contact info over the preferences page, without replacing it. So it seems like I should create route $splat/contact-info. But then it replace the screen. what should I do, in order to allow rendering the page matching the "$splat" for example "/home = $splat"?

8 Replies

afraid-scarlet•2mo ago

Personally, if it is not a hard set of routes, and just a general "If the route includes contact-info" then I would just render the lightbox at the root route with a render condition, something like

export const ContactModal = () => {
  const isOpen = useMatches({
    select: (matches) => matches.some((match) => {
      return match.routeId.endsWith("contact-info");
    })
  });

  if (!isOpen)
    return null;

  // render the modal
}

export const ContactModal = () => {
  const isOpen = useMatches({
    select: (matches) => matches.some((match) => {
      return match.routeId.endsWith("contact-info");
    })
  });

  if (!isOpen)
    return null;

  // render the modal
}

Might be a better way to do this, but I've done this with invoice lightboxes, etc, and seems to work pretty well. --- I believe a route will always replace another route (you cannot render multiple sibling routes at once, only parent/children routes) so I don't think you can accomplish this using a separate route, but I may be wrong.

stormy-goldOP•2mo ago

@ViewableGravy But what about the route handling? I mean routes folder. Because if you navigate to /home/contact-info, without me creating something with routes, it will simply show default "Not Found". I want to show the Home router content.

afraid-scarlet•2mo ago

Hmm, yeah, this wouldn't handle that, nor give you type safe navigation to such a route. If you have a hard requirement on being able to have contact-info as a child route of any route without it being a sibling route (and would therefore override the content) then I don't have a good answer, hopefully someone else might have some advice in that regard. --- Personally, if I plan on having a contact-info route at the end of any given route, and it was a finite number of routes that would have it, I would hard code in that route (just add a contact-info.tsx file that renders the modal component as a child of each route). On the other hand, if the requirement is "have a modal show on any route when a particular condition is met", I would use a search param. Hope you find the answer 🙂

stormy-goldOP•2mo ago

@ViewableGravy I see thanks for the response. I though of creating folder "$splat" and inside "contact-info.route.tsx", and then in the file get the splat value and show the corresponding page with the dialog. But it also seems like $splat works only for 1 level splat. for example it catches /home/contact-info but not /home/blabla/contact-info Well I also just figrued I can use $...splat instead. So what do you think?

afraid-scarlet•2mo ago

Literally naming the file that? I didn’t realise that was a thing. If it works it works then 😂

compatible-crimson•2mo ago

https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#splat--catch-all-routes You might want to see this The file is a simple $.tsx with the params name being _splat

stormy-goldOP•2mo ago

@hokkyss already saw.. see discussion here..

compatible-crimson•2mo ago

Aren't you using $splat (which is why it is only 1 level because it is considered a path param)? The correct one is $. But yea as long as it works.

Gaming

Programming

Catch all route for showing a modal over existing pages

Did you find this page helpful?