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

[manelio]

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:

function App() {
  return (
    <Routes>
      <Route path="/products" element={<ProductList />}>
        <Route
          path=":productId"
          element={<Product />}
        />
      </Route>
    </Routes>
  );

import { useMatch, useNavigate, Outlet } from 'react-router-dom';
import Dialog from '@mui/material/Dialog';

export default function ProductList() {

  const isProductPage = useMatch('/products/:productId')
  const navigate = useNavigate()

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

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

But suppose the user does control + click on the product to open it in a new tab, or reloads a product page. 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.

[pasivad]

Hi, I have the same problem, so maybe You somehow solved it? Viewing posts on Instagram is implemented in the same way, but don't know how... Maybe it's not even a React.