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!

[xavier-lc]

I'm currently using two different sets of routes on my app. They are rendered under a HistoryRouter, and I'm taking advantage of the second argument on useRoutes to scope their location. Something like:

const baseLocation = useRef(...);
const modalLocation = useRef(...);

<HistoryRouter history={history}>
  {useRoutes(baseRoutes, baseLocation)}
  {useRoutes(modalRoutes, modalLocation)}
</HistoryRouter>

Now I'm looking to replace that structure with a data-router using createBrowserRouter. Is there a way to keep the scoped location? Or I should keep that in a context and check inside each component?

[AnthonyCrowcroft]

surely for data routes to be fully functional this needs to be possible?

[doubleChu]

I found this example using createBrowserRouter: https://stackblitz.com/edit/github-9lelz2-tdcovz?file=src%2Fmain.tsx.
It has a problem that when navigating to "/img/:id", background page would change as the modal dialog appears.

<RouterProvider router={router} />

acts like

<BrowserRouter>
   <Routes>...</Routes>
</BrowserRouter>

in the official example,

{state?.backgroundLocation && (
    <Routes>
       <Route path="/img/:id" element={<Modal />} />
    </Routes>
)}

is inserted into before </BrowserRouter>.
But in the stackblitz link above, it works like it's inserted after it.
So if I am not in a function component when using createBrowserRouter, how can I achieve this?

[bvanderplanck]

I have stumbled into the same issue, using createBrowserRouter to take advantage of the loaders. We have a dynamic app where the route can either be a modal OR a regular page depending on a setting.
I ended up doing this:

import { UNSAFE_RouteContext, useLocation } from 'react-router-dom'
import { motion } from 'framer-motion'
import { useContext, useEffect, useState } from 'react'

const AppContent = () => {
  const location = useLocation()
  const context = useContext(UNSAFE_RouteContext)
  const [ innerLocation, setInnerLocation ] = useState<string>('')
  const [ outlet, setOutlet ] = useState<React.ReactElement | null>(context.outlet)

  useEffect(() => {
    if (location.state?.modal) {
      return
    }

    setInnerLocation(location.key)
    setOutlet(context.outlet)
  }, [ location ])

  return (
    <motion.div
      key={innerLocation}
      initial={{ y: 10, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: -10, opacity: 0 }}
      transition={{ duration: 0.2 }}
    >
      {outlet}
    </motion.div>
  )
}

export default AppContent

Passing the location state on the Link element conditionally.
The modal itself is injected in the DOM through portals and context. But at least I managed changing the URL in the history without changing the actual page state which is what I was aiming for. If that can help anyone..

[gvozdenkov]

@vitorcamachoo @bvanderplanck @doubleChu @AnthonyCrowcroft @xavier-lc
I had a task to make it so that from the root route, clicking on the product card would open a modal window with details about this product. But if the user directly entered the route address with details about the product, then a regular page with a description of the product would open.

I wanted to organize this using createBrowserRouter and the new react-router-dome trick with loader and action.

The difficulty is that we cannot use hooks at the createBrowserRouter creation level, so the previous background location techniques do not work.

I created such a routing scheme. The ingredient/:id route is just a modal window (and a regular page by condition, more on that below)

export const router = createBrowserRouter([
  {
    path: PATH.HOME,
    element: <RootLayout />,
    loader: ingredientsLoader(queryClient),
    children: [
      {
        children: [
          {
            path: '/',
            element: <Home />,
            children: [
              {
                path: 'ingredients/:id',
                element: <IngredientModal />,
              },
            ],
          },

          {
            path: '/profile',
            element: <OnlyAuth component={<ProfileLayout />} />,
            action: ProfileLayout.logout(store.dispatch),
            loader: userLoader(queryClient),
              },
            ],
          },

          {
            path: '/login',
            element: <OnlyUnAuth component={<Login />} />,
            action: Login.login(store.dispatch),
          },
          {
            path: '/register',
            element: <OnlyUnAuth component={<Register />} />,
          },
        ],
      },
    ],
  },
]);

The Home component renders product cards. The links on these cards look like this:

<Link
        to={`ingredients/${ingredient._id}`}
        state={{ from: location }}>
              {ingredient.name}
</Link>

I write down in the link information about where the transition is made on this link. If from the page Home - state will contain an object with information. If the modal route is navigated directly from the browser line, then the state object will be empty.

the Home component contains an Outlet component so that it can render a nested route with a modal in it:

export const Home = () => {
  const { data: ingredients } = useQuery(ingredientsQuery());
  const location = useLocation();

  return (
    <section className="p-4">
      <ul>
        {ingredients.map((ingredient) => (
          <li key={ingredient._id}>
            <Link to={`ingredients/${ingredient._id}`} state={{ from: location }}>
              {ingredient.name}
            </Link>
          </li>
        ))}
      </ul>
      <Outlet />
    </section>
  );
};

It remains to make sure that the IngredientModal component understands what to render - a modal or a regular page. This is where it really gets tricky. In fact, IngredientModal always renders a modal. Just one modal looks like a regular modal - a window on top of the page with a translucent background. And the second modal fills the entire bottom page with a solid opaque color and the content is already rendered on top of this fill

export const IngredientModal = () => {
  // get ingredients from TanStack query chache
  const { data: ingredients } = useQuery(ingredientsQuery());

 // get id from url params
  const { id } = useParams();
  const location = useLocation();
  
  // Check location.state content - if it's empty `isFromHome = false`
  const isFromHome = !!location.state;

  const ingredient = ingredients.find((ingredient) => ingredient._id === id);

  return isFromHome ? (
    <Modal>
      <div className="flex flex-col items-center max-w-lg mx-auto mt-10">
        <h1>{ingredient.name}</h1>
        <img src={ingredient.image_large} alt={ingredient.name} />
        <p>Price: ${ingredient.price}</p>
      </div>
    </Modal>
  ) : (
    <ModalFullScreen>
      <div className="flex flex-col items-center max-w-lg mx-auto mt-10">
        <h1>{ingredient.name}</h1>
        <img src={ingredient.image_large} alt={ingredient.name} />
        <p>Price: ${ingredient.price}</p>
      </div>
    </ModalFullScreen>
  );
};

ModalFullScreen component is a regular Modal, but the background is not transparent and there is no wrapper for the content that sets the dimensions of the modal and the alignment relative to the background

export const ModalFullScreen = ({ children }) => {
  return createPortal(
    <Overlay>
      <Content>{children}</Content>
    </Overlay>,
    MODAL_PORTAL_EL
  );
};

And regular modal:

export const Modal = ({ children }) => {
  const navigate = useNavigate();

  const handleClose = () => {
    navigate(-1);
  };

  return createPortal(
    <Overlay>
      <ModalWrapper>
          <button type="button" onClick={handleClose}>
            close
          </button>
        <Content>{children}</Content>
      </ModalWrapper>
    </Overlay>,
    document.querySelector('#modal-portal')
  );
};

Here is the result (there is no design, I test only functionality)
If click link on the home page '/'

And if I directly past this adress in browser address bar I have this:

[tanmayaBiswalOdiware]

@gvozdenkov So, if I understood correctly, the <ul> in the Home component is still getting rendered in the background but stays under the modal even when you put the address directly in the browser?

[gvozdenkov]

Heh.. Yep... But I don't know how to solve this task more clearly with router v6 data router:(

[vitorcamachoo]

Is there any clean way to have modal routes with data route API?

[Ashish-Krishna-K]

Anyone figured out a way to make this work?

[carrotpai]

after much wandering through the documentation, i came to a solution using matchRouters and renderMatches utils functions, but it looks more like bruteforce than a good solution.

export const renderRoute = (
	routes: RouteObject[],
	location: string | Partial<Location>
): React.ReactElement | null => {
	const route = matchRoutes(routes, location);
	const backgroundPage = renderMatches(route);
	return backgroundPage;
};

i keep two router objects (one for modals and one for other routes).

export const routes = createRoutesFromElements(
	<Route path="/" element={<RootLayout />}>
		<Route element={<PagesLayout />}>
			<Route index element={<MainPage />} />
			<Route path="blogs" element={<BlogsPage />} />
			<Route path="blog/:id" element={<BlogPage />} />
			<Route path="createPost" element={<CreatePostPage />} />
			<Route path="user/:id" element={<UserPage />} />
		</Route>
		<Route element={<AuthLayout />}>
			<Route path="login" element={<Login />} />
			<Route path="register" element={<Register />} />
		</Route>
	</Route>
);

export const modalsRoutes = createRoutesFromElements(
	<Route path="/">
		<Route
			path="user/:id"
			element={
				<Modal isModalOpened>
					<p>Modal With User</p>
				</Modal>
			}
		/>
		<Route
			path="login"
			element={
				<Modal isModalOpened>
					<p>Must be logged in</p>
				</Modal>
			}
		/>
	</Route>
);

then in root layout component

function RootLayout() {
	const location = useLocation();

	if (location.state?.background) {
		const backgroundPage = renderRoute(
			routes,
			location.state.background
		);
		const modal = renderRoute(modalsRoutes, location.pathname);
		return (
			<div className={styles.content}>
				{backgroundPage}
				{modal} {/** portal */}
			</div>
		);
	}

	return (
		<div className={styles.content}>
			<Outlet />
		</div>
	);
}

I haven't done any data router features testing, this solution was made only with the goal of recreating the old functionality of modal routes

[gvozdenkov]

Hmmmm! Cool idea! Will play with it!

[nitzanashi]

@carrotpai How did you register the routes with createBrowserRouter in your example you created 2 routes objects but do you register them both like

return <RouterProvider router={createBrowserRouter([...routes, ... modalsRoutes])} />;

Or is it something else?

A problem I encountered is that the page behind is being completely re-rendered so any local state would be lost.

[lxcid]

this looks the most elegant, i’m wondering when you branch off to do your own renderRoute, does it double render the RootLayout?

[ali-idrizi]

Using renderMatches() with data routes beats the purpose of using data routes in the first place. That's because data APIs do not work at all (e.g. if you had errorElement defined in one of the modalsRoutes, and a modal threw an error, it would not fallback to render errorElement). At this point you're better off just using <BrowserRouter> and not relying on the data APIs.

[productmap]

Two ways to make it https://devsday.ru/blog/details/114436

[gvozdenkov]

Yep, but this is not working if you need this double behavior for modals on / (home) route :(

[afkcodes]

have been struggling with the same i want to overlay the modal over the content which is rendered using a context but, the moment modal comes up on a route the outlet data goes off any suggestions or patterns how to fix this i am using routerProvider with createbrowserRouter

[afkcodes]

wanted to know if this is behaviour possible with RouterProvider i saw some examples with

[gvozdenkov]

Sorry, I don't understand what behaviour do you mean...

[afkcodes]

@gvozdenkov hey sorry, completely missed this. I am trying to build something like spotify where when you click on the miniplayer below it comes as a overlay, what i am trying to do is bring that overlay as a route using react-router so that when i hit back it goes to the previous screen. also at the same time when you swipe down the player you can see the page content that was there. I dont know if i can post a screen record of spotify as a reference here.

[gvozdenkov]

@afkcodes Now I understand. You can do this. But when you swipe (close popup ovelay) it will mean going to the previous route. This can be done with close handler in popup overlay:

 const handleClose = () => {
    navigate(-1);
  };

I realized this in my study project. IngredientModal component

[afkcodes]

will look into this thanks

[OliverJAsh]

At Unsplash this issue is preventing us from migrating to the new data router.

@brophdawg11 This discussion has a lot of upvotes now. What's your stance on this issue? Is this something React Router plans to support again?

[a463]

Would also appreciate an update on this, it's an old issue and the 7th most upvoted discussion, so clearly there's interest. It sucks that we have to choose between data router or modal routes.

[haitaojarvis]

More than a year has passed, is there any progress in this discussion so far? We'd really like to see an official solution built in, something as simple and easy as Intercepting Routes in Next.js or Route Masking in TanStack Router. Thanks a lot!