Different render for the same URL depending on the origin of navigation

[manelio]

(Note: this setup is for react-location, but I'm switching to new router and have the same doubt)

Use case: a product list on the /products route.

If the user clicks on a product, the route changes to /products/my-product, and the product information is displayed in a modal window over the listing. For this, I use matchRoute and Outlet like in the following code:

{
  path: "products",
  element: () => import('./pages/ProductList').then(module => <module.default />),
  children: [
    {
      path: ":itemId",
      element: () => import('./pages/Product').then(module => <module.default />),
    },
  ],
},

import { useMatchRoute, useNavigate, Outlet } from '@tanstack/react-location';
import Dialog from '@mui/material/Dialog';

export default function ProductList() {

  const matchRoute = useMatchRoute()
  const navigate = useNavigate()

  return(
  <>
  {/* ... code ... */}

  {matchRoute({ to: ':itemId' }) &&
    <Dialog
      close={() => navigate({ to: '.' })}
      content={<Outlet />}
    />
  }
  
  {/* ... code ... */}
  </>
  )
}

But suppose the user does control + click on the product to open it in a new tab. In that case, I want the product information to be displayed as the main content (the user has not arrived there from the list).

I've spent a long time thinking about the best way to resolve this, but I can't find an idea that convinces me.

[geoff-harper]

When they ctrl click the link, cache some recentProduct value in local storage and read from it in the route config. If the cached matches the incoming value then its a new tab. Don't forget to clear the value after reading it or else you'd keep getting the full page layout in same tab