Usage of modal child route not possible since #1495

@chorobin @schiller-manuel Ouch, that completely destroys the structure of my app. I've built an app with a route tree similar to the location masking example (without the actual masking)

const routeTree = rootRoute.addChildren([
  photoRoute,
  photosRoute.addChildren([photoModalRoute]),
  indexRoute,
])

where i have a:

route similar to photosRoute which renders a long list and an Outlet at the end
route similar to photoModalRoute which renders the details on individual element in modal

If i refactor my route tree to something like photosRoute.addChildren([photosIndexRoute, photoModalRoute]) and render my list of items inside photosIndexRoute then i wont be able to show the modal on top of the list of items.

I've tried to open the location masking example in codesandbox and typescripts complain for using <Link to={'/photos'} now

Originally posted by @nklhtv in https://github.com/TanStack/router/issues/1495#issuecomment-2074713285

React Example: Deferred Data also navigates to non-leaf routes which renders an <Outlet /> for the child route.

Should we not use modals as a child routes going forward? What is the recommended way of handling UX like the one in the location masking example? How it should be refactored to work properly with the new version of react-router?

TanStack / router

Usage of modal child route not possible since #1495 #1514