[Feature]: background location modal with createBrowserRouter

[ZachMayry]

What is the new or updated feature that you are suggesting?

Somehow add support for a background location with routes At first glance I'm not understanding how this modal example would work with the new data routers. https://github.com/remix-run/react-router/blob/dev/examples/modal/src/App.tsx#L56-L70 If this feature is supported, it would be nice to have the modal example updated

Why should this feature be included?

Allowing modal routes to be on top of background location routes is a feature our application is built on but we would like to use the new data loading features as well. It would be nice to not have to choose data loading or background locations for modals.

[alexgorbatchev]

I personally feel that the way the modal pattern is handled in react-router is basically a very inconvenient patch-job. It's a very common pattern for modals/drawers/etc to be visible at the same time as originating content. It was possible to do this with v5 relatively easy. Migrating to v6 isn't easy to begin with. The modal pattern deserves proper attention.

        // react-router@5
        <Route path={path}>
          <Content />
          <Route path={`${path}/new`}><Overlay /></Route>
        </Route>

[alexgorbatchev]

This took some times to figure out, hope it will help someone. To get basic modal functionality in v6 you can do something like this:

<Routes>
  <Route
    path=":id/grants/*"
    element={
      <>
        <Content />
        <Routes>
          <Route path="new" element={<Overlay />} />
        </Routes>
      </>
    }
  />
</Routes>

The modal example assumes you want to display modal content full screen when navigating directly to the route. IMO this isn't a typical modal pattern. If I open a side drawer and want to share the link, I don't want that drawer to be full screen when my friend navigates to my link.

[ZachMayry]

Modals don't have to be fullscreen. I started with the example in an application I'm working on it's working as you'd expect (not full screen). The CSS sets the dimensions and any open space displays the background route.

[alexgorbatchev]

@ZachMayry by "full screen" i didn't mean visually full screen. In the example if you navigate directly to /img/:id you see the image only, but if you click on a thumbnail you are taken to /img/:id but you see a modal.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!